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 Angular 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.