Managing Multiple Projects in Angular Workspace

Introduction

You may come around a situation where you need to manage multiple projects in a single project. In such a situation you can create an Angular workspace and manage your multiple projects in it. Let us start and understand first what is a workspace.

What is a workspace?

A workspace allows you to organize your application into multiple projects where a project contains files that comprise a standalone application. To set up multiple projects, you need to skip the initial application structure that is created and just create a workspace.

In Angular, when you run the following command:

ng new myFirstApplication

Then this is how your project structure will look:

It installs all the necessary npm packages and all the dependencies in a new workspace creating an application named my-project. In such a case the application has the same name as the workspace. This is the “multi-repo” development style in which each application resides in its own repository.

By creating just a workspace without the initial application of Angular, we can manage multiple projects in it. In such a situation we can also create shareable libraries and can use “monorepo” development style in which there will be a single repository containing all the applications and the shareable libraries also.

Advantages of multiple projects in a Workspace

• You will have a shared node modules folder for all the projects thereby saving disk space
• You need not run npm install for each project
• A single git repository

Prerequisites

Angular requires node version 10.9.0 or later.

Creating a workspace

To create a workspace, run the following command:

$ ng new firstWorkspace --create-application=false

We are setting –create-application to false as not to create the initial Angular 10 application in the workspace. Here ‘firstWorkspace’ is the workspace name. You can name it anything you want.

Here is the initial workspace project structure:

Initially, it will only generate these files:

• README.md for project information
• angular.json for the CLI configuration for the build, serve, and test tools of all projects in the workspace
• package.json for all the dependencies.
• tsconfig.json for Typescript configuration,tslint.json for TSLint configuration,tslint.json for TSLint configuration,
• .editorconfig for the configuration of code editors. 
• .gitignore for listing the files that should be ignored by git.

Creating an application in a workspace

Now let’s create one project into it.

Switch to the workspace directory and run the following command:

ng generate application first-app

Here, you can see how the directory structure looks after creating two applications.

To build your application for production, you can mention the application name in the ng build command like this:

ng build --prod --project="first-app"

Creating a library in a workspace

You can also create a library inside a workspace. A library is a project which cannot run on its own rather it needs must be imported and used in an application. A library is always created for solving general solutions which can be further used in different applications. You can use them locally or also publish them as npm packages. 

To create a library, follow this command

ng generate library libraryName

When you create a library, the generated files will be inside the projects folder. I have created a library named ‘my-lib’ and this is how the library directory structure looks:

Unlike applications, libraries will have their own package.json. The library will include a module, service, and a component. Also, when you create a library angular.json will be updated with a project of the type library.

If you want to publish your library as an npm package please refer here.

To use the library in the same package, you need to build it with the following command (You cannot use a library before it is built):

ng build libraryName

Further, you can import it into your application to use it.

import { myExport } from 'libraryName';

Whenever you make any changes in your library don’t forget to rebuild it. Otherwise, your application will use the old build of the library.

To learn more about libraries, refer here.

Running the application

There are three ways to run the application.

• In the angular.json, you can see at the end the default project. So change the project name to the application you want to run and then run the “ng serve” command.
• To run the application, you can set the name in the command itself like:

ng serve --project="first-app"

• You can simple write the application name after ng serve like:

ng serve first-app

Conclusion

In this blog, we learned what is a workspace and how can we manage multiple projects in it. We understand how we can run different applications in it and also how to create a library. To know more about workspace, you can refer here.