DEV Community

Cover image for  Beauty of the angular 🤩 Create Multiple application in single workspace.🔥
Krishna Bhamare
Krishna Bhamare

Posted on • Updated on

 

Beauty of the angular 🤩 Create Multiple application in single workspace.🔥

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.

Alt Text

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.

Alt Text

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.

Alt Text

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.

Alt Text

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.

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!