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

See original GitHub issue

🐞 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?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
alan-agius4commented, Jun 9, 2020

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.

2reactions
SchnWaltercommented, Jun 9, 2020

@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

Read more comments on GitHub >

github_iconTop Results From Across the Web

An unhandled exception occurred: The 'buildOptimizer' option ...
Go into your angular.json file; In that file, follow the path projects -> architect -> build -> options; Change "buildOptimizer" to true andΒ ......
Read more >
ng build - Angular
Option Description Value Type Default Value ‑‑aot Build using Ahead of Time compilation. boolean true ‑‑base‑href Base url for the application being built. string ‑‑delete‑output‑path Delete...
Read more >
Angular Build Optimizations - IntSights
When we started using Angular, we enabled all the recommended build optimizations without taking into account their possible negative impact. ToΒ ...
Read more >
What's new in Angular CLI 12.0? - Ninja Squad
json . ng update will automatically remove these options from your configuration. As Zone.js v0.10 is no longer supported, ngΒ ...
Read more >
@angular-devkit/build-optimizer | Yarn - Package Manager
This package has always been experimental and never hit 1.0.0, meaning it should not be used directly outside of Angular. Angular Build Optimizer....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found