Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

handling multiple applications with angular cli

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.

like image 207
Winnemucca Avatar asked Aug 08 '17 18:08

Winnemucca


People also ask

Can we have multiple app modules in Angular?

Only one root module can exist in an Angular application.

Can multiple Angular applications be bootstrapped using same element?

only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.


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

like image 183
Eric Simonton Avatar answered Oct 14 '22 10:10

Eric Simonton


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

like image 23
Venugopal Reddy Avatar answered Oct 14 '22 10:10

Venugopal Reddy