In this guide, we will show you how to organize multiple apps in one Project or workspace. There are a few advantages of having a single workspace for multiple apps. One is you do not have to run the time consuming
npm install for every app. The
node_modules folder is shared with all the other apps. The apps can be updated to the next version easily.
Applies to: Angular 6, Angular 7, Angular 8. Angular 9
Table of Content
Create the Workspace
We create a new app using the
ng new <new> Angular CLI command. It creates and workspace with an initial Angular app with the name <new> in the src folder. The createApplication=”false” option introduced in Angular 7 now stops the creation of the initial app. It only creates the workspace
ng new MultipleApps --createApplication="false"
The above command creates folder with the name
MultipleApps and configures the workspace. It does not create any
Creating the App
Now, to create a new app under the workspace, we need to use the
ng generate application command The first app created is marked as the default app.
ng generate application gettingStarted
If you use the
ng new inside the workspace, it will throw the following error.
The new command requires to be run outside of a project, but a project definition was found at “D:\MultipleApps\angular.json”
Running the App
There are three ways in which you can run the app.
One is to use the
ng serve gettingStarted
ng serve --project="gettingStarted"
angular.json and locate the
defaultProject and change the name of the project to
gettingStarted and run
Create Another App
To create another app, run the
ng generate application again.
ng generate application exampleApp
Running the App
And use the
ng serve to run it
ng serve exampleApp
ng serve --project="exampleApp"
Building the App
ng build to build the app with
ng build --prod --project="gettingStarted"
ng build --prod --project="exampleApp"
The folder structure is similar to the Single App workspace, except for the following
src folder is gone. Instead, we have a
projects folder. Each app we create gets its own folder under the
dist folder now has a folder for each of the new app.
angular.json, contains the configuration settings for the workspace. Here is the shortened version of
Angular.json for the above code.
"newProjectRoot": "projects", <== location of the apps
//This section contains the setting for the gettingStarted project
//This section contains the setting for the exampleApp project
"defaultProject": "gettingStarted" <== name of the default project
newProjectRoot: node points to the location of the
projects: contain a section for each app in the workspace. Each section contains configuration for the compiler.
defaultProject: The default project use, when you run the
ng build etc.
In this guide, we learned how to organize multiple apps in one single workspace/Project in Angular.