handling multiple applications with angular cli

Question

I am interested in being able to bootstrap multiple applications with the angular cli.

Through the angular-cli wiki I was able to find an example https://github.com/angular/angular-cli/wiki/stories-multiple-apps

Also I found https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

I went through the angular-cli.json file and ran

    "apps": [
    {
      "name": "app1",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.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"
      }
    },
    {
      "name": "app2",
      "root": "src",
      "outDir": "dist2",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main2.ts",
      "polyfills": "polyfills2.ts",
      "test": "test2.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app2",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

I was able to get this to run with the following commands

ng serve --app 0
ng serve --app 1

My first question with this approach is how would be maintain this in the case that we list several apps in the angular-cli? This will get a bit much to monitor and track.

Also, with this approach would you be better off bootstraping a different module in each main.ts file?

The second way I saw this done was in an example in the comments.
https://github.com/Farata/angular2typescript/blob/master/Angular4/router-samples/.angular-cli.json.

This is more ideal, although I am unable to replicate and identify how all of these applications share the same dist folders and everything else besides name.

With the second approach of sharing everything I am wondering how this different than creating a large number of modules and lazy loading them?

I know this question is very theory based but resources online are very limited and I would be interested in knowing how other developers are attacking this issue.

Answer 1

If i had several apps in angular-cli i would name them like:

"apps": [
    {
      "name": "app1",
      "main": "main1.ts",
      ...
    },
    {
      "name": "app2",
      "main": "main2.ts"
    }
]

Then to start app1 we can run either

ng serve --app 0

or

ng serve --app app1

I prefer second approach because it's easier to understand which application is running.

How to monitor them?

You have to know what you're doing:)

Also, with this approach would you be better off bootstraping a different module in each main.ts file?

It depends on what your application will do. I prefer having different bootstrap modules because this ways i can cut some excess stuff from some of application.

For example i need to have two application with almost the same logic but the second app is just part of first with its own features.

So my second application can bootstrap SecondModule that will import some shared between applications modules and its own feature modules.

@NgModule({
  import: [
    SharedModule,
    SharedModule2,
    SecondFeature1,
    ...
  ]
})
export class SecondModule {}

Moreover for such applications i would create corresponding typescript configs to protect ts compiler (and expecially ngc compiler) of doing some redundant work:

tsconfig.app1.json

files: [
  "main1.ts",
  "path to some lazy loaded module"
]

tsconfig.app2.json

files: [
  "main2.ts"
]

This is more ideal, although I am unable to replicate and identify how all of these applications share the same dist folders and everything else besides name.

I think it's mistake. I would output these applications to different folders.

As question is theory based i would say that if you have quite large application you probably will came across with performance build. And having many applications in one angular-cli application can became nightmare. It's just my opinion and experience on this :)