You may need to have an Angular project that has multiple apps so you can run the build of a particular app, say depending on the customer you’re preparing the build for. In my case, I wanted to create a project with multiple apps that I use in my Angular workshops. Having a single project with multiple apps allows you to run a time-consuming npm or yarn install once and just modify the name of the app you want to run.
For example, you may have multiple versions of the main bootstrap file that load different root modules. The file .angular-cli.json has the apps section with the property main, and to run a particular app, I’d instruct the students to modify .angular-cli.json to point at a particular app, e.g. "main": "main1.ts". To run another app, I’d instruct them to change this line to "main": "main2.ts".
But then I figured out that you can configure multiple apps in the same .angular-cli.json and run the build for a particular app by name. The apps property is an array, and you just need to configure each app there. For example, the following fragment shows how I configured two applications – app1 and app2 in the same .angular-cli.json:
"apps": [
{ "name":"app1",
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main-resolver.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{ "name":"app2",
"root": "src",
"outDir": "dist2",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main-luxury.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css",
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
Now to bootstrap the app main-resolver.ts I run the following command:
ng serve --app app1
To bootstrap the main-luxury.ts, I run this:
ng serve --app app2
You can also refer to each app by its index in the apps array:
ng serve --app 0
or
ng serve --app 1
The option –app is available for the ng build command as well. The following screenshot shows my project after I built the app1 into dist and app 2 into dist2.
This is a pretty useful Angular CLI feature and I wanted to share my findings with you.
Update. The angular team is working on the Angular Elements module that will allow you to create Angular widgets that you’ll be able to embed into any HTML app. This should allow you to have multiple apps on the same HTML page as well. This feature should be available in the upcoming Angular 6 releases.
Also, Angular CLI 6 makes it easier to configure multiple apps in the same project in their new configuration file angular.json (a replacement for .angular-cli.json).
yakovfain.com 
This is great! thanks for posting. I implemented this today.
To not compile all the apps together, you can extend your tsconfig.app.json file and using a specific tsconfig file for each app. In that tsconfig file you can exclude the directories for your other apps, therefore avoiding those files when compiling.
FYI extending a tsconfig and editing the excludes overwrites the base exclude settings (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#configuration-inheritance-with-extends).
Also here’s how to use app-specific karma configs: https://github.com/angular/angular-cli/issues/6008#issuecomment-301355746
Can you show an example of this?
Thanks you save lot of time 🙂
thanks foo this.
But how can I navigate between this two apps?
This is still a major limitation. As best I can tell you have to run the apps separately on different ports, which means your local storage gets segmented between different apps so to test integration between the two apps you redo, which means to really test integration you need to build both, and deploy (hand, gulp, grunt, tfs, etc) them to a local web server.
Hey this is really helpfull, Is there any github link for the same to play with it.
This project has several apps configured: https://github.com/Farata/angular2typescript/tree/master/Angular4/router-samples
https://github.com/Farata/angular2typescript/tree/master/Angular4/router-samples
The link provided is not active.
fixed the link, thanks
Hi, Yakov. Thanks for sharing. This is great info.
Question, is it possible to have cli to output index.html for each app in its corresponding folder rather than myapp1.html, myapp2.html…?
Just specify different outDi r for each app and the build for this app will go there, e.g. “outDir”: “dist1”.
nice work! how can i get the name of the current app inside some component?. Thanks
Not sure is Angular offers such API, but you can add an environment var in the environment files
“environments”: {
“dev”: “environments/environment.ts”,
“prod”: “environments/environment.prod.ts”
}
Then it’ll be available in your code.
Hi. thanks. I meant how can i just make a console.log with the name of the current app running. console.log(X) to print app2 or app1,
Read about the use of envitonment vars. As I wrote earlier, if you define a var in env files, you can log it, e.g. console.log(“environment.myAppName”)
Hi, Yakov. Thanks for sharing. This is exactly what i was looking for. This setting works fine for serving for development using ng serve –app app1
But, when i try to do a prod build with “ng build –prod –app app1”, It fails. It tries to build all the app modules together.
Any idea on how to fix this?
Have you used two dashes in front of the app?
Yes 🙂
My folder structure is something like this
– src
– app
– app1
– app2
– common-components
– main.ts
– app1.main.ts
– app2.main.ts
I have a common-components folder which has components which are used in all the other apps. common-components is not an app in itself. It just has components that I import and use in the apps. Could this be causing the issue?
This is the structure: http://imgur.com/Cl1Bfqi
Just checked
“ng build –app=app1 –aot=true”
This fails too.
But, “ng build –app=app1 –prod –no-aot” works
The problem is in aot. 🙂
your issue is not related to having multiple apps in one project. The AoT compiler doesn’t like something in your code. See if this helps: https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5
Hi, if you have common components and getting error “Some component is part of the declarations of 2 modules” you need to split them into shared modules. And then your apps should import those modules. This way you will be able to build each app in prod mode
How do you handle routing in it?
Hi, I am angular2 beginner. Please tell us How to load multiple apps in one domain in angular-cli. But I have dis not find out how to implement this. I have written a post on stack overflow but can’t get an answer. Please tell me with explain step by step. Stack overflow post is:- https://stackoverflow.com/questions/45255400/how-to-load-multiple-apps-in-one-domain-in-angular2
you can’t. 1 app === 1 //endpoint:port
Hi, How to load two and multiple apps same time.
Great article, Yakov! It was a huge help to me and I am going to implement this in my current project 🙂 Just one question I have though; what does this look like for a production build? Would I need to build each app separately?
It seems to me that with this approach you would have to go through each app individually, optimize it, and aot compile it but if that isn’t the case I would love to know how to do it differently.
Say you have 2 apps: app1 and app2 configured in your .angular-cli.json. You can run builds separately:
ng build --app app1, and thenng build --app app2.Or you can create add an npm script to package.json and build both of them (specify different dist dir for each app in your .angular-cli.json):
"buildBoth": "ng build --app app1 && ng build --app app2".After that,
npm run buildBothTanks you Yakov!, Can I serve two or more apps on the same host and port?
Thank you Yakov! Can I serve two or more apps on the same host and port? I tried it:
“serveBoth”: “ng serve –app app1 && ng serve –app app2”. After that, npm run serveBoth. But it does not work!
When trying to run build for two seperate app as said above I am facing issue while executing npm run builBoth issue is it throwing error stating “you should be inside the angular-cli folder to execute the build commands”
cd to your project’s dir and then run build
Great work man ! I need a clarity! I have a scenario in which i have to use the component from one angular application inside another angular application! Is there anyway to achieve it ?
Modularize your apps. Place a component that you need to use in two apps into a separate feature module and use it in both apps.
Great article – We have a few angular applications and would like to share components like Bin Fellick says.
You answer Bin to “place a component into a separate feature module”. Is it just a separate folder?
It’s a separate feature module, which can have one or more folders. you can read about feature modules here: https://angular.io/guide/ngmodule
Have any sample for this?
In our new book, starting from chapter 5, we build a sample ngAuction app that’s modularized. The code is here: https://github.com/Farata/angulartypescript
If you need explanations, get the book.
Hi Yakov,
Great post!!.. It is going to help me alot. If we run the build with specific app1, then can we get the generated script files data which are related to app1 only?? OR will we get the app2 files also?
Hi thanks for your helpful article
how can i use: ng generate component with multiple app
below error show when i use this commend:
ng generate component downloads\lists –module=admin.module.ts
installing component
Specified module does not exist
First, you need to run ng g m admin
I want to create user and admin app in single project. Is it possible to do that with angular and webpack ? Apps should be able to build and deploy separately If necessary. User able to access user app through localhost:8080/user and admin page through localhost:808/admin.
Hi Jake,
I have the same requirements. Do you get any ideas of how to achieve access to two apps at the same time?
In My Project i received this error:
The option ‘–app’ is not registered with the serve command. Run `ng serve –help` for a list of supported options
Most likely you have an old version of Angular CLI. Instal the latest one. I juts ran ng help serve – the –app option is there.
HI can we deploy this two independently when it’s require. any link please provide.
Thanks, Yakov. I have recently took your 12 hour Angular course @safarionlinebooks.com and it was great. I have a question regarding on the approach to build multiple individual micro services based ng apps and then combined them into a single main large app. These individual apps are targeted for a set of unique business functions and will be built by separate teams. Is this possible via Angular? If yes, what would be the recommended approach? Thanks!
Take a look at the JHipster project http://www.jhipster.tech/
I’m trying to understand a bit more the advantages of multiple apps…
Just to figure out, suppose that I need to structure a project to develop front-ends for an Accounting, Accounts payable and Accounts receivable. They are different subsystem but they have much modules/components/models in common.
Would they fit into a multiple apps project ?
Could you please provide a link or hint where to find out about the “HTMLElement component that will allow you to create Angular widgets” update? Thanks
1. https://m.youtube.com/watch?v=ljsOPm4MMEo
2. https://medium.com/vincent-ogloblinsky/export-angular-components-as-custom-elements-with-angular-elements-a2a0bfcd7f8a
Is there a way to put all access points for all the modules in top home component . based on your example each apps has its own router outlets so it has to be accessed using corresponding apps and accesspoint.
Can I put Menu Items on top home components for all child apps
Don’t create multiple apps for thid. Create on app and split it into modules.
Thank you for this article it was very usefu l! However, the configuration for unit tests is global in this example. What is the best practice to test each application separately with karma and jasmine?
Yakov, I have a slightly different scenario of choosing between the apps. My home page displays two tiles say, APP-1 and APP-2. On click, dynamically bootstrap / load the application that has been selected. How do I achieve? Please suggest. Thanks!
I didn’t do it myself, but here’s what you can try:
Create a static HTML page (without Angular) with custom JS that dynamically loads Angular app’s bundles (depending on clicked tile), after the bundles are loaded manually bootstraps the app (e.g. dynamically add tags for each bundle. A tag allows adding JS callbacks for the loaded event, so you know the moment when all bundles are loaded. Alternatively, for dynamic loading, you may use SystemJS or a polyfill for a newer standard – the import() function.
Hello Sir,
Thank you for this constructive and educational article.
I am looking for something that could be related to the content described in this article. I am after developing a portal where I have many independent modules. The modules would require sharing some common components and services, etc.
At the same time, we have several developers that need to develop this app. Therefore, we are considering some architectures to make this portal as modular as possible.
Would the ability to have multiple apps inside an angular-cli project help in this regard? Can we, for instance, click on a link in app1 and route the user to component1 in app2? Would it work that way?
I’ve read a lot about splitting an app into modules. But in my case, I would like a developer to create a new app, develop it all, and then just plug it into the main portal.
You should create a very light-weight shell for your portal that each developer has on his PC, and the app should consist of modules, not the app. Having two apps running on the same page is a very special case and would require creating a JavaScript shell with a special way to load the apps.
Thanks Yakov. I am researching now how I can make all the functionality of the app through angular modules. So when I give the portal for 3rd party developers, they will have an app with all loaded modules. They will then add their own,
Hello
We are building an IBM Websphere Portal portal, this works as Widgets, we build applications in Angular separately and load them on the same page. When we do this, we have the following error “Uncaught Error: Zone already loaded”, apparently the common Angular components of each application do not allow them to work together, how should we load the separate modules? and how we should load the common modules so that this does not happen.
Thank you very much
regards
Hi, I have two Projects
1) project-1,
2) project-2,
and I want some components of project-1 inside project-2 and vice versa.Is it feasible for doing so?
Create a shared feature module that will contain components required for both projects. Then load this shareable module in each project.
Hi Yakov Fain,
Thank you so much for your valuable time and advise, it’s really worked for me and now I’m able to access any shared components in both the application, even I’m able to run both the project simultaneously.It’s really great thing for me and knowledge gain.
I am using Visual Studio to write my TypeScript for a HTML5/Angular JS 5 application. I followed your tutorial here. I have two applications called app1 and app2. I deliberately have an error in app2. When I give ng serve –app app1 my code is not building and it points me to error in –app2. Is there a way where is respective of app2 errors app1 builds correctly and my over all app runs fine?…
Each app configuration in .angular-cli.json has its own tsconfig property pointing at the TypScript compiler option. You can always specify the file/dirs that tsc should be using.
Great! I have an issue.. I did split my app into 3 parts and I am hosting via nginx. I still could’t get to a way in which I can navigate! locally I was using ports and manually changing these ports in the url. now after I deployed the 3 directories and host in enginx, I have been trying to navigate ( changing root directory in nginx ) between apps based on some cookie value. It didn’t work with me! Can you tell (if possible) the best practice of navigating! ?
Hi there, this is similar issue with Sahar Jadoa.
I am trying to implement micro frontend/ microservice and I want to implement using angular. I have 4 apps
1. App shell: aggregate all other apps and shared modules
2. Customer marketplace
3. Merchant site
4. Admin site
which each apps will be developed by separate team, build and deployed separately on nginx server. The app shell is the main app whenever user navigate to any page/app the app shell load shared module + the appropriate module. All the apps share local storage or cookie. I want to navigate from each app to other app seamlessly which means the user does not know each section are different the host and port are the same but each app is deployed separately on the server with different URL. My question is there any way to build each app separately and consumed by app shell and how to load each app inside app shell.
Hi, great post first of all. Just wanted to check how can we serve both apps together? Is there any way like buildboth like serveboth. Or they have to be launched in two different ports and then VIA CORS only they can talk to each other via shared components. Thanks in advance.
Hi. Can Any body can help me?
I have two angular 6 project.Completely two different project.
One project is use for Website Front View(landing pages like etc)…
Second project is used for Backend view (Admin panel).
Can I run together these two project and can naviagate from one project component to other project component?
Help please.
Thank you so much for this 🙂
Is it possible to create different repositories for each app in git?
how can i run app1 and app2 in different ports?
https://github.com/angular/angular-cli/wiki/serve
Hi Yakov,
This is really helpful, thank you.
I have 3 modules in my app – main module and 2 other modules. Both these modules are lazy loaded by main module, I would like to build any of these lazy loaded child modules individually, so that I can deploy only the piece I want to be updated. I am finding ways on how I can avoid complete deployment and instead deploy only the chunks.
Lazy loaded modules are already built as separate chunks when you run ng build or ng serve. Deploy just them.
thank you this is very helpful, but what happens when i want to do ng build –prod and want to deploy to my server only one chunk?
Hello, This is really helpful, thank you.
just wanted to check, I have two angular apps in the same project. Can I run together these two project and can navigate from one project to another project?
Help please.
Hello Yakov ,This article is really helpful,I am using angular 6 with dotnetcore .I have created two app app1 and app2 and set the “outputPath”: in architect to :wwwroot/app1″ fro app1 and “wwwroot/app2” for app2 . On building the solution the files are bundled for app1 under wwwroot/app1 but not for app2. Can you help me in resolving this.
Thank you for this!
Great article. But i have one question, what if the two projects have different dependencies?
Hi yakov,
Quick question if we build multiple apps at same time like
build: ng build app1 && ng build app2
Its working but issue is i have 6 projects in one project its taking long time to build because of node modules are complied each project individually how can we do all apps build with same node modules
Angular 7 has this concept of a workspace, which has one node_module and multiple apps.
any possibilities in agular6 to achieve it? references or blogs or git repos are appreciated
i have a question about css load for diffident application it is not working only taking default style for parent src folder, please help how can i apply diffident css for diffident application
anyone can reply on my comments
Thanks for the post sir. I have been banging my head on this feature for one requirement in my project. Anyone, Please help if you can. I have project structure like this.
one main app and 3 sub apps(sub projects) – app1 app2 and app3. Say, all the sub apps (app1, app2 and app3) are part of main app. each sub-app/sub-project has 5 modules. I do lazy loading to those modules using loadChildren in routing.
So, after ng build I get 15 chunks in dist folder. 5 chunks belongs to each app(project). I want them to be in separate folder inside dist in the name of the project. This will help to deploy only the changed project chunks in the prod server. Is there a configuration that we can do in angular.json or using webpack and achieve this?? Please comment.
This will be very helpful if we have multiple projects in a single directory and we want to deploy only the specific project chunk files in the server.
Hi!
Thanks for this post!
I just cannot run ng build –prod –app 0. Is there any other to select the app in ng build –prod?
use –prod
Hi Yakov,
Thanks for this post!
I have one doubt. I have two applications. The earlier one was developed using Angular and the new one was developed using AngularJS. The backend is SpringBoot. I want to keep it up the two applications as per the requirement. Now I want to develop a logic to toggle between the old one and the new one(Using a Toggle button). Could you please let me know how to achieve this functionality?