Thank you for reading my blog posts, I am no longer publishing new content on this platform, you can find my latest content on my personal site -

Angular 6 - Angular CLI Workspaces

| By Maina Wycliffe | | | Angular

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.

Automate Deployment of Angular Apps using AWS CodeBuild

Building and deploying Angular app is very time consuming, especially with large application. You also must keep track of which branch you …

Read More
How to Build Adaptive Layout Design using Angular Flex Layout

Angular Flex Layout is a powerful layout tool available for Angular. It provides an API than can be easily used in both component templates …

Read More
How to Implement Sign-in with Google in Angular and a REST API

A few weeks ago, I demonstrated how to implement Sign in with Facebook with a REST API. Today, I will show you how to Sign-in with Google in …

Read More
Implementing Login with Facebook with Angular and REST API

Today, I am going to show you how to create an Angular App with a REST API that uses Facebook Login to sign in/up users. For this …

Read More
Search Engine Optimization with Angular

Today, I will show you how to optimize your Angular 5 and above for search engine and other crawlers. It is important to note that, pages …

Read More
Adaptive Layout Design - Angular Flex Layout

Introduction You probably have heard about Responsive Layout design but let me remind you anyway. Responsive layout is where components and …

Read More