Angular 12 - Generating browser application bundles (phase: sealing) very slow

Question

After I update my Angular Application from Angular 11.2.12 to Angular 12.0.0

Angular CLI: 12.0.0
Node: 14.15.4
Package Manager: npm 6.14.10
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1200.0 (cli-only)
@angular-devkit/core         12.0.0 (cli-only)
@angular-devkit/schematics   12.0.0 (cli-only)
@schematics/angular          12.0.0 (cli-only)
typescript                   4.2.4

ng serve generating browser application bundles takes horrible long.

Build at: 2021-05-28T06:03:02.008Z - Hash: 3b63141b76ac88698d67 - Time: 63941ms <- change one line in template
Build at: 2021-05-28T06:08:04.424Z - Hash: e684399b5f80b2b4d785 - Time: 59834ms <- change property name
Build at: 2021-05-28T06:10:05.725Z - Hash: 8125e1bdc31a25d398b5 - Time: 65621ms <- change one line in model

I try different properties for ng serve, at the moment I use:

ng serve --source-map=true --hmr --live-reload

After update to Angular 12.0.0 I generate an complete new angular app and take over the angular.json to my application myapp:

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "myapp",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/myapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["./node_modules/@angular/material/_theming.scss", "src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": {
                "scripts": true,
                "styles": false,
                "fonts": false
              },
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "myapp"
}

Is there something I can do to speed up the Generating browser application bundles (phase: sealing)?

Answer 1

I try to do a lot of stuff to solve that issue, but hopefully I can reduce my changes to two important points:

1. update angular 12.0.0 to angular 12.0.2
2. set defaultConfiguration in angular.json to development ("defaultConfiguration": "development")

"defaultConfiguration": "production"

Build at: 2021-05-29T06:49:51.461Z - Hash: 9d68fbaa715d790c89ed - Time: 29446ms <- change one character in string
Build at: 2021-05-29T06:50:31.850Z - Hash: cc2399413ce6f0800553 - Time: 32195ms <- change one character in string

"defaultConfiguration": "development"

Build at: 2021-05-29T06:52:16.258Z - Hash: b9b4991fa89ef1e785fc - Time: 781ms <- change one character in string
Build at: 2021-05-29T06:52:27.484Z - Hash: 3838e3c45e33228591f9 - Time: 622ms <- change one character in string

final angular.json

• "sourceMap": true is important for me
• simply call ng serve, no additional parameters needed

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "dotbot": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "dotbot",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/dotbot",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.json",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["./node_modules/@angular/material/_theming.scss", "src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": {
                "scripts": false,
                "styles": false,
                "fonts": false
              },
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "development"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "dotbot:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "dotbot:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "dotbot:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "inlineStyleLanguage": "scss",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "dotbot:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "dotbot:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "dotbot"
}

Answer 2

I too upgraded an Angular 8 application to 13 and noticed a huge degradation in the sealing phase time during the edit-compile cycle (almost a whole minute). My fix is as follow as none of the suggestions I came across helped me.

Whatever new Angular version you've updated to, do the following:

1. Generate a new app (e.g., ng new proj13) in the version you're upgrading to. Here, maintain the project creation defaults as performed in the old project (e.g., scss instead of css, router or no router...)
2. Either copy the new angular.json as-is from the new throwaway project to the upgraded one, or at least make sure you rewrite the old one to look exactly like the new one.
3. Make sure the project name is the one used under the projects, browserTarget, outputPath... properties in case a filename change took place.

Once done, the edit-compile cycle was the expected "instant", milliseconds no more.

I think during such upgrades, the angular.json file is not getting the proper new-version-format attention it needs as you should discover if you inspect the old vs the new file formats/keys/properties.

Answer 3

I believe the changes in speed are due mostly to webpack 5. Unless there is some horrible bug in Angular 12.

I installed a webpack plugin SpeedMeasurePlugin. To do that you have to install the @angular-builders/custom-webpack.

The config file I used was something like this:

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({

  output: {
    scriptType: "module"
  },

  plugins: []
});

For my project that gave me the following output.

As you can see a lot of the time is spent on sass-loader (and possibly css-loader).

I'm looking into ways to cache the sass. I believe most of it is from Angular Material.

I completely blanked out my styles.css file and ended up with:

The ordering is not exactly the same, but the time spent on sass in total seems to be considerably less.

I'm not quite sure where to go from here. Sass isn't the whole story and my aot build is still extremely slow. Is that webpack 5? Not sure.

Answer 4

Upgrading my packages with npm upgrade has solved my issue.