Angular-cli: --app option missing in version 6.0.0

Created on 9 May 2018 · 6Comments · Source: angular/angular-cli

Versions

Angular CLI: 6.0.0
Node: 8.10.0
OS: darwin x64
Angular: 6.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.0
@angular-devkit/build-angular     0.6.0
@angular-devkit/build-optimizer   0.6.0
@angular-devkit/core              0.6.0
@angular-devkit/schematics        0.6.0
@ngtools/webpack                  6.0.0
@schematics/angular               0.6.0
@schematics/update                0.6.0
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

Using the steps described in https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/ I used multiple apps in my .angular-cli.json file. With version 1.7.3 I was able to use the following command to serve an individual app:

ng serve --app app0

After updating to Angular Cli 6.0.0, the option is now missing with the new structure of the angular.json file. Also the option is missing in the documentation: https://github.com/angular/angular-cli/blob/master/docs/documentation/serve.md

Observed behavior

Unknown option: '--app'

Desired behavior

I would like to serve a specific app (or rather project with the new terminology in the angular.json file) similar to the way I used to with @angular/cli 1.7.3.

Mention any other details that might be useful (optional)

After updating from 1.7.3 to 6.0.0 I ran

ng update @angular/cli

which migrated the old .angular-cli.json to the new format in the .angular.json file. My angular.json file looks like this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "src",
  "projects": {
    "app0": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app0",
            "index": "src/app-app0/index.html",
            "main": "src/app-app0/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/app-app0/assets"
            ],
            "styles": [
              "src/styles-shared.scss",
              "src/bootstrap-customizations.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app0:build",
            "proxyConfig": "./proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app0:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app0:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/styles-shared.scss",
              "src/bootstrap-customizations.scss"
            ],
            "assets": [
              "src/app-app0/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "app1": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/app1",
            "index": "src/app-app1/index.html",
            "main": "src/app-app1/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/app-app1/assets"
            ],
            "styles": [
              "src/styles-shared.scss",
              "src/bootstrap-customizations.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app1:build",
            "proxyConfig": "./proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "app1:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app1:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [],
            "styles": [
              "src/styles-shared.scss",
              "src/bootstrap-customizations.scss"
            ],
            "assets": [
              "src/app-app1/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "app1",
  "schematics": {
    "@schematics/angular:component": {
      "spec": false,
      "changeDetection": "OnPush",
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

Source

mircowidmer

Most helpful comment

Following https://medium.com/@beeman/how-to-do-x-in-angular-cli-v6-db7530c23066, --app was replaced with --project, so the following command works:

ng serve --project app0

mircowidmer on 9 May 2018

👍10 ❤3

All 6 comments

Following https://medium.com/@beeman/how-to-do-x-in-angular-cli-v6-db7530c23066, --app was replaced with --project, so the following command works:

ng serve --project app0

mircowidmer on 9 May 2018

👍10 ❤3

According to wiki there is no --project parameter in ng serve or ng build in CLI 6.0.0

By the way the Universal Rendering is telling us to create newtarget under architect node. I wonder how to run the build for it. The Building the bundle section is still written for old CLI.