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 screen shot 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.

Advertisements

24 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

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