Angular shared assets with multiple apps — Nrwl Nx

With the release of Angular CLI v6, support for workspaces containing multiple projects was introduced, such as multiple applications or libraries. Nrwl did support this ability previously though the Angular team has now brought this into the core.

Personally I still like the benefits Nrwl brings hence this tutorial makes use of Nrwl Nx though you can still achive the same without Nrwl. Assuming you have a Nrwl workspace setup, lets generate two projects within our workspace. Run ng generate app app-one and ng generate app app-two.

Tip: You can simply type ng g app ..., you can also make use of the --dry-run flag to simulate the generation if you are not 100% sure of what the command will do, can get a little bit confusing when using the short hand methods.

Example of Angular multi-project workspace

Shared assets within a multi-project workspace

Say you needed to reference shared assets across multiple projects within a single workspace, you will need some way of housing your assets in a central location whilst being able to reference them as if they were within the relative project. Angular libraries would be the perfect however to reduce complexity, we don’t need to create a library in a sense but rather a folder in a logical location (libs) to house our assets.

Typical shared assets: graphics, photographs, videos, audio and files.

Create a folder within our libs directory called shared-assets. Within our new folder, you could create what ever structure you like. Lets say we wanted to house images and icons separately — we could create these additional directories resulting in the below:

Angular 6 shared assets library

Next we need to tell the Angular CLI which project will need to reference our shared assets. Open up angular.json and navigate down the rabbit hole to projects.app-one.architect.build.options.assets and add the shared-assets lib as below. Do this for both projects.

"assets": [
  "apps/app-one/src/favicon.ico",
  "apps/app-one/src/assets",
  {
    "glob": "**/*",
    "input": "./libs/shared-assets/",
    "output": "./assets"
  }
]

The shared-assets library is now added as an asset and will be imported when ever we serve or build our projects. Note the position of our addition, if we were to include it above the existing assets — we would overwrite files with the same name within the project. The idea is you would want the ability to overwrite the lib assets and not the other way around though this is up to you. You could take it a step further and extend the Angular schematic so that this include happens automatically when creating a new project.

Lets test — place a image called logo.svg within lib/shared-assets/images. In app.component.html within app-one, include a image like below:

<img src="../assets/images/logo.svg">

Run ng serve --project=app-one and we should see our image.

Tip: Add the open flag to automatically open you browser when serving --open or -o

Congrats! you now have a shared asset library. :)