in angular.json buildOptimizer not allowed to be set for "serve"

[freed00m]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

No, I think it is simple oversight in angular.json schema

Description

Cannot disable AOT for serve if buildOptimizer set to true.
due to

buildOptimizer is illegal option in serve

🔬 Minimal Reproduction

I've created a custom configuration

...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/frontend",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/assets/favicon.ico",
              "src/assets/svg",
              "src/assets/i18n"
            ],
            "styles": ["src/styles.scss"],
            "stylePreprocessorOptions": {
              "includePaths": ["src/app/shared/", "src/assets/"]
            },
            "scripts": []
          },
          "configurations": [
...
            "demo": {
              "fileReplacements": [
              ],
              "baseHref": "./",
              "optimization": true,
              "outputHashing": "none",
              "sourceMap": true,
              "aot": true,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "5mb",
                  "maximumError": "10mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
           }

..

but for serving I want to turn of AOT, which is

I could do

"serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "frontend:build",
            "baseHref": "/app/"
          },
          "configurations": {
            "production": {
              "browserTarget": "frontend:build:production"
            },
            "demo": {
              "browserTarget": "frontend:build:demo",
              "optimization": false,
              "aot": false,
              "sourceMap": true
            }
          }
        },

but that will fail, because the "buildOptimize" is true, and is not allowed to be set in serve configuration

🔥 Exception or Error

$ ng serve --configuration=demo
Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(buildOptimizer).

🌍 Your Environment

$ ng version

Angular CLI: 9.1.1
Node: 12.16.2
OS: win32 x64

Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@angular/cdk                      9.2.0
@angular/material                 9.2.0
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

[alan-agius4]

Hi @freed00m, I think this is expected.

buildOptimizer is not an option of dev-server builder (ng serve), but rather it's a browser build option (ng build). I am surprised to see that optimization and aot are valid option for ng serve.

My suggestion would be to use multiple configurations examples;

"serve": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
       ...
    },
    "configurations": {
        "production": {
           "aot": true,
           "optimization": true,
           "buildOptimizer": true,
           "sourceMap": false
           ...
        },
        "demo": {
            "buildOptimizer": true,
            "optimization": false,
            "aot": false,
            "sourceMap": true
        }
    }
},
"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "frontend:build",
        "baseHref": "/app/"
    },
    "configurations": {
        "production": {
            "browserTarget": "frontend:build:production"
        },
        "demo": {
            "browserTarget": "frontend:build:production,demo",
        }
    }
},

More info: https://angular.io/guide/workspace-config#alternate-build-configurations

I am going to mark this issue as needs further discussion to see if we should do anything about the aot and optimization options in the serve builder.

[freed00m]

I tried to avoid multiple configurations, since they share so much, except the aot and optimization.

But maybe you are correct to not allow it. I just got bitten with aot = true in "serve" and was getting mad why my rebuilding takes so long.

I have a long "fileReplace" list and didn't want to keep two copies in two similar configurations.

sidenote - My desire is to have demo serve fast as the regular defaults are, but demo "build" should produce optimized aot builds as production does. Cannot do it now without 2 configuration

[alan-agius4]

I tried to avoid multiple configurations, since they share so much, except the aot and optimization.
I have a long "fileReplace" list and didn't want to keep two copies in two similar configurations.

You don't need to duplicate the "common" configuration options such as fileReplacements. In this case demo should only contain the options that override the once of the production configuration. Since we can pass multiple configs ng serve --configuration=production,demo. In this case, the command parses the named configurations from left to right. If multiple configurations change the same setting, the last-set value is the final one.

NB: in version 9 AOT is turned on by default for both dev and production builds, because there shouldn't be much difference in terms or build times.

[freed00m]

I am still confused.

In this case demo should only contain the options that override the once of the production configuration

So --configuration=production,demo will still end up with aot + optimization in ng serve demo, however I will create a third configuration that will only disable the aot+optimization a will have something like --configuration=production,demo,aotoff

NB: in version 9 AOT is turned on by default for both dev and production builds, because there shouldn't be much difference in terms or build times.

Yes you are correct I might start using aot in serve also without optimization.

[alan-agius4]

Note: we should work on a design doc and decide which build specific options to remove from the dev-server build such as AOT and optimizations.

Users are encouraged to use different configurations build configurations instead of overriding build specific options in the dev-server builder.

[Heerschop]

@alan-agius4 It is a pity that the merge #17713 is closed and that this flexibility does not fit in the roadmap.

We are already using the configurations very intensively. We have setups that exists of upto 16 different configurations. Think of multiple organization theming, otap and app vs web configuration.

Now we have to add even more configuration. Because we cannot do overingen for temporarily disable the optimizations from the cli when doing debugging.

[alan-agius4]

@Heerschop, it would be interesting to see what sort of configurations you are using to see, if they can be reduced/split.

Are you using multiple named configurations? as described #17473 (comment) and https://angular.io/guide/workspace-config#alternate-build-configurations

[Heerschop]

@alan-agius4 this is an application that we have to deploy in 16 different configurations

The application is targeted to the web as PWA and targeted to the phone as a Cordova-app. This has to be done for two organizations with their own styling. For this we use 4 different projects, the project are manly used for file copies like assets, icons, service workers, styles etc. Which can be different depending on the organization or if it's on the phone or the web.

Each project contains 4 different configurations for the staging environments. The configurations are mostly simple file replacement of the environment.ts which contain information about the backend API's being used, which can be different for each environment. For the production configurations we use the optimization settings as well.

For debug, it's really nice if we can temporarily overrule the configuration settings, that speeds up debugging in a production configuration. Of course, we can add an extra configuration for this, but we prefer not to.

angular.json

[SchnWalter]

@Heerschop, you should use the new-ish multiple configurations feature. These are applied from left to right and allow you to override options like this:

ng build -c brand-one
ng build -c production,brand-one
ng build -c production,brand-one,debug

ng serve -c production,brand-two,debug

// Or
ng build -c production,brand-one-staging,debug
ng build -c production,brand-one-uat,debug

Here, you basically provide the default production flags in the production config, then for each environment you override the files, but if you want a debug mode, you just add an extra debug which changes some of the flags, like buildOptimizer.

BUT, the application configuration that varies between environments like staging, UAT and production, should be outside of the application bundle. You should set the API endpoint when you deploy the application, not when you build it, see #17786

[Heerschop]

@SchnWalter This is a nice and clean solution for my problem.

[alan-agius4]

Hi @Heerschop, you don't need to create configurations in serve to use build configurations in the dev-server builder.

You can use dev-server (ng serve), browserTarget option.

ng serve --browser-target <my-app>:build:production,brand-two,debug

The command is a bit more verbose, but you won't need to include extra configurations in angular.json.

[SchnWalter]

@freed00m, I see that you've reacted to some of the suggestions above. Do the last couple of suggestions work for you? If so, can you please close this issue? Thanks!

[freed00m]

@SchnWalter yes, sorry I was not sure if there is anything more to be discussed.
:) thank you very much

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}