Optimizing Your Workflow with Multiple Projects in Angular

When we build our Angular apps, splitting the code into modules is good to keep the code in a specific place, but sometimes we need to break it into the project to put everything in an isolated area.

By default, Angular CLI generates an initial application, but what happens when our project grows? Maybe we start with a basic web but need to create a landing page and want to share components between pages using a library. It is the perfect scenario to use Angular Workspace.

Read more about Angular WorkSpaces Official

What Is A WorkSpace?

The Angular workspaces allow us to split and organize our code in multiple projects, making it easy to manage dependencies, build with a single npm install for applications and node_modules, and put it all together in a single repo.

Using WorkSpaces

To start using the workspace, we must create the main structure. For example, our company is amazing_company with a few projects under it.

We run the ng new using the flag --create-application=false to not generate the default project.

ng new amazing_company --create-application=false

It builds a file structure with package.json, tslint, tsconfig, etc., all necessary to manage, register and create new projects using the CLI.

What Are Differences?

Let's show the differences between ng new myproject and the flag--create-application=false?

It is the list of files generated by ng new myproject with the directory src and example app to start to code.

angular.json package.json src tsconfig.spec.json
karma.conf.js package-lock.json tsconfig.app.json
node_modules README.md tsconfig.json

With the flag --create-application=false, only generate the minimal files to manage the project.

angular.json package.json README.md
node_modules package-lock.json tsconfig.json

Perfect, we have differences apparent, following add projects to the workspaces.

Add Projects To WorkSpace

We are going to add three new projects to our workspace:

• Two applications: amazing_web, and amazing_landing.
• One library, amazing_library to share components between apps.

First, add the two applications using the CLI command ng g short version of generate with the flag application and the project's name.

ng g application amazing_landing
ng g application amazing_web

The CLI creates the directory projects and registers the applications in the directory.

angular.json package.json projects tsconfig.json
node_modules package-lock.json README.md
dany@dany:~/Desktop/amazing_company$ cd projects/
dany@dany:~/Desktop/amazing_company/projects$ ls
amazing_landing amazing_web

We have our two applications generated. Next, we create a library to share code between apps.

Add Library

To add a library as a project, we run the command ng g library amazing-library:

ng g library amazing-library

The CLI creates a list of files for the library with his package.json to register his dependencies.

karma.conf.js package.json src tsconfig.lib.prod.json
ng-package.json README.md tsconfig.lib.json tsconfig.spec.json

Perfect, we already create the library with his files. Our next point is to build and run the projects.

Learn more about Angular CLI Commands.

Building and Running Projects

As we worked before with the CLI, we can run our applications or build using the ng commands like ng server or ng build with the application name.

By default, the angular.json sets the first project as default and loads the first project created if you use ng serve without the application name.

ng serve amazing_landing
ng build amazing-library

Recap

We learn why to use the angular workspace to split our project and how the angular CLI efficiently manages projects, running, and building. I hope it helps you in your next projects.