Clever Geek Handbook

Angular CLI Build Options

I love Angular CLI and use it for all my Angular projects. But from time to time, I come across a use case that the official docs handle very poorly. So at the risk of tying too much in one question, here are my most pressing questions:

  • How do I configure build options and what are they used for? The official docs tell you how to define them and also distinguish between build targets and build environments, but leave the rest to your imagination. I think it defines multiple values ​​for flags and unflaggables (new word), for example using UglifyJS

    .
  • ng build --app

    "Indicates the application name or index to use." This small proposal is the sum of all the documentation. I have a case where it would be convenient to have one index.html

    for one environment and one index.html

    for another. I thought it might be, but it seems not. Does anyone know how to use this, or conditionally provide another index.html

    ?
  • I have set up two additional environments and can read these values ​​at runtime. Fabulous. I want to do another deployment script for additional environments. So the usual dev

    and prod

    act as always, but devextra

    also prodextra

    expands the additional file (a bit like adding something conditionally to scripts

    in .angular-cli.json

    ).

Scores 2 and 3 are for integration with another instrument. My real solution is to manually edit index.html.

+3


source to share


1 answer


I found a good answer for points 2 and 3. Number one is still a mystery.

Here's an example .angular-cli.json

showing how to do this:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "project-name"
  },
  "apps": [
    {
      "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.scss"
      ],
      "scripts": [
        "somescript.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }, {
      "root": "src",
      "outDir": "../completely/different/folder",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "otherindex.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss"
      ],
      "scripts": [
        "somescript.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.extra.dev.ts",
        "prod": "environments/environment.extra.prod.ts"
      }
    }
  ],
  /* These are empty for brevity */
  "e2e": {},
  "lint": [],
  "test": {},
  "defaults": {}
}

So this is a bit big and most of it is duplicated, so let me give you a tour.



  • There are apps

    actually two objects in the array . There is usually only one, and I'm not sure when support for multiple applications was added, but this is for the command line --app

    . So, it ng build --app 0

    uses the first object for configuration, and ng build --app 1

    uses the second. The same with ng serve

    .
  • I was able to provide a different output path, a different index.html, and even a completely different set of files environment

    . Also note that the two configurations deploy two different (and completely plausible) script files. In fact, you change so much, it's impressive.

Several mistakes:

  • Don't mess with environmentSource

    . It looks like it's just the default for the environment dev

    from the first configuration.
  • Several flags don't seem to work that well. I think it deployUrl

    only works on the command line and baseUrl

    cannot be specified in the config at all. There may be others.
  • While they allow you to change root

    , I really don't understand why you just won't be making a completely different application. It is probably impractical to stretch this shell in the past.

My real thinking is that I will use one .angular-cli.json

with multiple configurations and then create batch files to wrap the calls to ng build

/ serve

.

+1


source






More articles:


All Articles