CODEWITHSUNDEEP
angularcordovaangular-cli
Cobus Kruger
Cobus Kruger

Reputation: 8605

Angular CLI Build Options

I love Angular CLI and use it for all my Angular projects. But every now and again I run into a use case that the tremendously bad official docs don't help with. So at the risk of bundling too much into one question, here are my most pressing questions:

  1. How does one configure build targets and what are they used for? The official docs tell you how to specify them and distinguish between build targets and build environments, but leave the rest up to your imagination. I think it determines a few flag values and unflaggables (new word) like using UglifyJS.
  2. ng build --app "Specifies app name or index to use." That little sentence there is the sum total of all documentation. I have a case where it would be handy to have one index.html for one environment and another index.html for another. I thought this may be it, but it seems not. Does anyone know how to use this, or to conditionally supply a different index.html?
  3. I have configured two additional environments and can read those values at run-time. Fabulous. What I want to do is include an additional script to deploy for my extra environments. So the normal dev and prod act as always, but devextra and prodextra deploys an extra file (a bit like conditionally adding something to scripts in .angular-cli.json.

Points 2 & 3 are for integration with another tool. My present workaround is a manual edit of index.html.

Upvotes: 2

Views: 1630

Answers (1)

Cobus Kruger
Cobus Kruger

Reputation: 8605

I have found a good answer for items 2 & 3. Number one is still a mystery.

Here is an example .angular-cli.json showing how to do it:

{
  "$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 little big and most of it is duplicated, so allow me to give you a tour.

  1. The apps array actually has two objects in it. Normally there is only one and I'm not sure when multiple app support was added, but that is what the --app command line is for. So ng build --app 0 uses the first object for configuration and ng build --app 1 uses the second one. The same with ng serve.
  2. I was able to provide a different output path, a different index.html and even a completely different set of environment files. Also, notice the two configurations deploy two different (and totally believable) script files. There is actually so much you can vary here, it's impressive.

A few gotchas:

  1. Don't mess with environmentSource. It then seems to just default to the dev environment from the first configuration.
  2. A few flags don't seem to work so well. I think deployUrl only works on the command line and baseUrl can't be specified in config at all. There may be others.
  3. While they allow you to change root I really can't see why you wouldn't just do a completely different app. It probably isn't wise to stretch this past its design envelope.

My current thinking is that I'll use a single .angular-cli.json with multiple configurations and then create batch files to wrap my ng build/serve calls.

Upvotes: 1

Related Questions