Create Multiple Angular Apps in One Project

The Code Points August 07, 2022 0

In this article, we will demonstrate how to develop and arrange several apps in a single Project or Workspace. Since version 6, we may establish a multi-project workspace in the Angular CLI to manage numerous Angular apps. To start with, we create a blank workspace. An assortment of Angular projects, apps, or libraries makes up a workspace. Later, we can expand the workspace to accommodate more projects.

Advantages

Having multiple Angular apps in a single project has many benefits.

1. One is that you do not have to perform each app's time-consuming npm install.
2. All the other applications share the node modules folder, which conserves disc space.
3. Any software can easily be upgraded to the newest version.
4. an individual source-control repository (like git).

Create the Empty Workspace

Using the ng new app> Angular CLI command, we build a new app. A basic Angular app named "new" is created in the workspace's src folder. The initial app no longer gets created when the createApplication="false" option, introduced in Angular 7, is used. It merely establishes the workspace.

ng new MultipleApps --createApplication="false"
cd MultipleApps  

The aforementioned command configures the workspace and creates a folder with the name MultipleApps. No apps are produced by it.

Add a new Project to Workspace

Now, we must use the ng generate application command to create a new app under the workspace. The default app is the initial one that is developed.

ng generate application gettingStarted

It will generate the following error if you use ng new inside the workspace.

Run the App

The app can be run in three different ways.

• NG serve gettingStarted should be used.
• Use the ng serve --project flag. --project="gettingStarted"
• Locate the defaultProject in angular.json, rename it to gettingStarted, and then execute ng serve.

Add Another Project to the workspace

Run the ng generate application once more to build another app.

ng generate application exampleApp

Run the App

And run it using ng serve.

ng serve exampleApp

OR

ng serve --project="exampleApp"

Building the App for Production

To create the app with the --project option, use ng build.

ng build --prod --project="gettingStarted"
ng build --prod --project="exampleApp"

Folder Structure

With the following exceptions, the folder organization is similar to the Single App workspace

projects folder

The src folder no longer exists. Instead, we have a folder for projects. Under the projects folder, each app we produce has its own folder.

dist folder

Each of the new apps now has its own folder in the dist folder.

Angular.json

The workspace's configuration settings are contained in the angular.json file. Here is the condensed Angular.json file for the previously mentioned code.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",     <== location of the apps
  "projects": {
    "gettingStarted": {
         //This section contains the setting for the gettingStarted project      
    },
    "exampleApp": {
        //This section contains the setting for the exampleApp project
    }},
  "defaultProject": "gettingStarted"    <== name of the default project
}

newProjectRoot: node designates where the projects folder is located.

projects: have sections for each workspace app. The compiler configuration is contained in each section.

defaultProject: The project that is used by default when you execute ng serve, ng build, etc.

Conclusion

This guide showed us how to use Angular to group various apps into a single workspace or project.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.