Beauty of the angular 🤩 Create Multiple application in single workspace.🔥
Krishna Bhamare
Posted on March 14, 2021
One of the Beautiful feature added in Angular CLI was the --create-application
flag.
By default --create-application flag is true
it will Create a new initial application project in the src
folder of the new workspace. When false
, creates an empty workspace with no initial application. You can then use the generate application command so that all applications are created in the projects folder.
Let's start creating the empty workspace:
ng new angular-apps --create-application=false
cd angular-apps
Here angular-apps is sample name given for the workspace and --create-application=false is allow us to create the empty workspace.
Now empty workspace is created in your system, if you look at the angular.json
file, it is having empty projects
schema, it means we have not created the project yet.
Let's add first project to the angular-apps workspace:
we need to use the ng generate application
command The first app created is marked as the default app.
ng generate application exampleApp1
now, exampleApp1
is successfully created in angular-apps
workspace, if we look at the angular.json
file, exampleApp1 schema added inside the projects schema.
Add Another Project to the angular-apps workspace:
To create another app, run the ng generate application
command with different application name again.
ng generate application exampleApp2
exampleApp2
app is created into the workspace and schema automatically added inside the projects
in angular.json
.
Like this we can add multiple application in same workspace.
Run the App on development mode:
use ng serve
command to run the application.
ng serve exampleApp1
// to run exampleApp1 app
ng serve exampleApp2
// to run exampleApp2 app
OR
ng serve --project="App Name"
Note: Each app will be run on the different port, if multiple apps running simultaneously.
Building the App for Production:
Use ng build
to build the app with --project
option.
ng build --prod --project="exampleApp1"
ng build --prod --project="exampleApp2"
here you can find the source code for multiple-app in single workspace.
Posted on March 14, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 20, 2024
November 15, 2024