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 HTMLElement component 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 within the same HTML page as well. This feature should be available in one of the Angular 5 releases.

Advertisements

43 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?

  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!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s