Angular Cli: How to serve 2 apps?

Question

I need 2 different apps on same project:

index.html > mainApp Module
login.html > loginApp Module

(this is required for security reasons managed by Spring Security)

I vave angular-cli.json described below:

  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "login.html",
      "main": "login.ts",
      "test": "login-test.ts",
      "tsconfig": "login-tsconfig.json",
      "prefix": "login-app",
      "mobile": false,
      "styles": [
        "login-styles.scss"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

But only deploy the first one (on "apps" array).

If I invert Login at position [0], this works, but mainApp Module doesn't.

Apparently the reason is, Angular Cli doesn't inject created JS files on the second html.

How can I resolve this?

Brocco · Accepted Answer · 2017-07-18 12:00:12Z

3

UPDATE: Multiple apps are supported now by the CLI - docs are here

Currently the Angular CLI does not support multiple apps. It is something that will be supported in the future.

For now you could work under separate directories (aka separate CLI projects).

edited Jul 18, 2017 at 12:00

answered Dec 6, 2016 at 20:49

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brocco Over a year ago

You're welcome. If you do move away from the CLI just be aware that you will need to create your own build process for both projects from the ground up (outside the CLI).

user663031 Over a year ago

The --app option is now available in ng build etc.

Mohammad Karimi · Accepted Answer · 2017-04-12 11:22:29Z

0

You can edit your .angular-cli.json file and setup multiple apps

"apps": [
    {
      "root": "src",
      "outDir": "../Application.Web.UI/wwwroot/app/Candidate",
      "assets": [
        "assets"
      ],
      "index": "index.html",
      "main": "main.candidate.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app_andidate",
      "styles": [ "share/css/material.scss" ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "root": "src",
      "outDir": "../Application.Web.UI/wwwroot/app/Company",
      "assets": [
        "assets"
      ],
      "index": "index.html",
      "main": "main.company.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app_company",
      "styles": [ "share/css/material.scss" ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

answered Apr 12, 2017 at 11:22

Mohammad Karimi

4,2212 gold badges25 silver badges20 bronze badges

2 Comments

Anthony Over a year ago

Can you specify what ports to run each app on?

eZo Over a year ago

Not in the config. But you can run your app on next available port if 4200 is already in use ng serve --app 1 --port=0

Collectives™ on Stack Overflow

Angular Cli: How to serve 2 apps?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related