handling multiple applications with angular cli

user_4184670 0
Viewed 13293

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.

angular-cli angular
3 Answers

The CLI version 6 now supports this out of the box with simple scaffolding commands. First you create a normal cli project using ng new root-name. Then you can add projects within it using ng generate application sub-app-name. See their wiki page here.

user_18365060

You can use ng generate application command to create separate application. This creates 'projects' folder with environment same as base application. But there will be shared modules. How will you refer at both places? One option is to use relative path.

This article explains with example https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527

I also found one problem with this approach. You need to lazy load sub applications from main application. For this, route path need to be specified in base app.routes.ts file. What if you want to build only base without sub applications? You need to maintain two versions of app.routes.ts file

user_85906600
Related