Angular CLI: multiple apps in the same project

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).

Advertisements

80 thoughts on “Angular CLI: multiple apps in the same project

    1. 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

    1. 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.

  1. 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…?

    1. Just specify different outDi r for each app and the build for this app will go there, e.g. “outDir”: “dist1”.

    1. 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.

      1. 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,

        1. 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”)

  2. 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?

      1. 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?

        1. 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. 🙂

    1. 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

  3. 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.

    1. Say you have 2 apps: app1 and app2 configured in your .angular-cli.json. You can run builds separately: ng build --app app1, and then ng 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 buildBoth

      1. 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!

      2. 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”

  4. 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 ?

    1. 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.

      1. 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?

      2. 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?

  5. 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

  6. 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.

    1. 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.

  7. 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!

  8. 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 ?

  9. 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

  10. 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

  11. 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?

  12. 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!

    1. 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.

  13. 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.

    1. 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.

      1. 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,

  14. 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

  15. 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?

    1. Create a shared feature module that will contain components required for both projects. Then load this shareable module in each project.

      1. 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.

  16. 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?…

    1. 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.

  17. 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! ?

  18. 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.

  19. 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.

  20. 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.

  21. 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.

  22. 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.

  23. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s