Angular 6 – Angular CLI Workspaces

One of the least talked about features of Angular 6 is Angular CLI Workspaces. Workspaces or Angular CLI Workspaces give angular developers the ability to have more than one project in one workspace. This brings all your projects under the same workspace. This is not limited to applications but also angular libraries.

This gives developers the freedom of breaking down large applications into smaller applications and modules. The modules such as authentication module can then be shared across the applications using those specific modules. This improves the workflow by reducing code repetition using shared libraries that are generated and managed by Angular CLI.

Getting Started

To use CLI Workspaces, you must be running the latest version of Angular, Angular 6. If you are using an earlier version of Angular in your project, please upgrade by following the instructions here. For a new project, there is nothing special about creating a new one:

ng new application-name

This will look like any other angular project, with all your source code being under src directory. To add another angular project (application or library) to your application, you use the ng generate command. This is the same command you use to generate new components, services, classes etc.

Generating a new application:

ng generate application new-application-name

Generating a new library:

ng generate library library-name

NB: You can learn more about ng generate command here.

By default, all new applications and libraries are placed under the projects directory in the root of the angular workspace. You can change this by modifying the angular.json file in the root of your workspace, then modify the newProjectRoot to your preferred directory.

Running ng generate on new Projects

The initial application in your workspace is the default application. This means that when you run angular cli commands like ng generate component without specifying the project, then they are automatically generated in the default application. To generate components, services, classes etc. for the new projects you must provide the project option, as shown below:

ng g c my-new-component --project application-name
ng g s my-new-service --project application-name

The same applies to libraries:

ng g c my-new-component --project library-name
ng g s my-new-service --project library-name

Building and Running Different Projects

This is the easy part. When building or serving your application, you only need to add your project name to your build command, as show below:

ng serve application-name --aot
ng build application-name –prod
ng build library-name --prod

You can skip the project name when building or serving the default project.

ng serve --aot
ng build --prod
ng build –prod

The build files can be located in a project folder under dist folder in the root of your workspace. For instance, if the project name is project1, then they will be located under dist/project1 folder.

Final Thoughts

Angular CLI Workspaces is not a perfect tool but will improve with each release of Angular in the future. It would be nice if all projects could be placed under a single projects folder and not one for generated project and the src directory for the initial project. The other downside I came across is lack of or scattered documentation although this can be attributed to the fact that not many developers are using it for now.

That being said, it’s a simple to use tool yet very effective that you should definitely give a try. In my case, I am already using it for most of my projects. If you have any ideas of a topic (blog post or a YouTube video) you would like me to cover, please leave it in the comment section below and I promise I will cover it. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.