Angular-cli: Documentation missing for new angular.json schema

Created on 23 May 2018 · 8Comments · Source: angular/angular-cli

Versions

$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.3
Node: 8.9.4
OS: win32 x64
Angular: 6.0.3
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.3
@angular-devkit/build-angular      0.6.3
@angular-devkit/build-optimizer    0.6.3
@angular-devkit/core               0.6.3
@angular-devkit/schematics         0.6.3
@angular/cdk                       5.2.5
@angular/material                  5.2.5
@angular/material-moment-adapter   5.2.5
@ngtools/webpack                   6.0.3
@schematics/angular                0.6.3
@schematics/update                 0.6.3
rxjs                               6.2.0
typescript                         2.7.2
webpack                            4.8.3

Documentation is generally missing for the 5.0 -> 6.0 upgrade, specifically regarding the schema of the new angular.json. Some more info on https://update.angular.io/ would be helpful

I'm particularly struggling to re-create build/serve options for prod/dev in different languages. I don't want to make full configs for prod-en prod-de serve-en serve-de prod-with-x-en prod-with-x-de etc. So far I've found some info at https://blog.ninja-squad.com/2018/05/04/angular-cli-6.0/ but my google fu has not yielded any actual specification of what a browserTarget is exactly, for example. I sort of assume I will need to dig into @angular-devkit, which seems like a rabbit hole

Source

narthur157

👍3

Most helpful comment

Angular is becoming unusable for new developers due to these kind of black magic happening in background.

srikanthps on 3 Jul 2018

👍17

All 8 comments

We have some documentation here: https://github.com/angular/angular-cli/wiki/angular-workspace.

You probably want to use a configuration for each language in build, then reference it with `"browserTarget": "project-name:build:configuration-name".

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ...
          },
          "configurations": {
            "production": {
              // ...
            },
            "en": {
              "i18nLocale": "fr"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "latest-project:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "latest-project:build:production"
            },
            "en": {
              "browserTarget": "latest-project:build:en"
            }
          }
        },

This can lead to some repetition as there is no way to compose configurations. There's a feature request for it in https://github.com/angular/angular-cli/issues/10612.

Hope this helps.

filipesilva on 24 May 2018

👍2

The documentation does not reference browserTarget at all. Isn't this the most important option?

narthur157 on 25 May 2018

👍2

In the link I gave you there is a link to the schema of the dev-server: https://github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/%40angular/cli/lib/config/schema.json#L907-L1028

Here you find the description of browserTarget:

            "browserTarget": {
              "type": "string",
              "description": "Target to serve."
            },

Admittedly, it is rather sparse. But it is there. It refers to a target that is using the @angular-devkit/build-angular:browser builder.

filipesilva on 30 May 2018

@filipesilva It seems like it is not possible to use "browserTarget" AND overwrite some of its values. E.g. for serve i can use "browserTarget": "myapp:build" and set or overwrite aot, but if i want to set assets:

"configurations": {
            "target1": {
                  assets: [ ... ]
            }
}

I cant: Data path "" should NOT have additional properties(assets). Neither in options nor in configurations i am able to set most values for serve.

Is this a bug? I am really confused by all this and also missing better documentation.

MickL on 14 Jun 2018

👍2

Angular is becoming unusable for new developers due to these kind of black magic happening in background.

srikanthps on 3 Jul 2018

👍17

@MickL you can't overwrite browserTarget values in the dev server, but you can reference a browserTarget that has the overwritten values instead.

filipesilva on 6 Jul 2018