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.
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:
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.
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
app-one, include a image like below:
ng serve --project=app-one and we should see our image.
Tip: Add the open flag to automatically open you browser when serving
Congrats! you now have a shared asset library. :)