0
218
ViewsAngular 12 - Generating browser application bundles (phase: sealing) very slow
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)?
2 answers
Answer question0
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.
0
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:
- 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.,scssinstead ofcss, router or no router...) - Either copy the new
angular.jsonas-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. - 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.