Upgrading from v9 to v11 ng build/serve are very slow

🐞 Bug report

Command (mark with an x)

  • new
  • build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Description

We were unable to upgrade from angular 9 to 11 last year. After doing the migration the builds are taking around an hour and ng serve is taking around 10minutes to start and then a few minutes to recompile.

🔬 Minimal Reproduction

The project is quite large. I may be able to share it on my private github if necessary.

🔥 Exception or Error

I saw this issue raised: #17557 that was able to spit out the webpack timings but I tried the same command and didn’t get anything. Here are some logs from that command though:

Hash: 10062e72e655a942dd34
Version: webpack 4.44.2
Time: 708716ms
Built at: 03/09/2021 10:15:12 AM

LOG from webpack.buildChunkGraph.visitModules
prepare: 157.7756ms
visiting: 11.9087ms
calculating available modules: 0.9064ms
merging available modules: 0.1087ms
visiting: 47.7026ms
calculating available modules: 1.9921ms
merging available modules: 0.023ms
visiting: 1.39ms

Initial Chunk Files | Names | Size
main-es5.3ac0413d5fda208dcf49.js | main | 3.60 MB
main-es2015.3ac0413d5fda208dcf49.js | main | 3.32 MB
polyfills-es5.1577f06bbd7cd498d2aa.js | polyfills-es5 | 131.77 kB
styles.088de8f15a462993e614.css | styles | 108.92 kB
polyfills-es2015.603bb5ba1ae3ee6b7388.js | polyfills | 45.98 kB
runtime-es2015.12e587ff0e65ab518ba8.js | runtime | 3.40 kB
runtime-es5.12e587ff0e65ab518ba8.js | runtime | 3.40 kB

🌍 Your Environment


Angular CLI: 11.2.3
Node: 14.16.0
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.3 (cli-only)
@angular-devkit/build-angular   0.1102.3
@angular-devkit/core            11.2.3 (cli-only)
@angular-devkit/schematics      11.2.3
@angular/cdk                    11.2.3
@angular/cli                    11.2.3
@angular/flex-layout            11.0.0-beta.33
@angular/material               11.2.3
@schematics/angular             11.2.3
@schematics/update              0.1102.3
ng-packagr                      11.2.4
rxjs                            6.5.5
typescript                      4.0.7

Anything else relevant?


"production": {
              "fileReplacements": [
                {
                  "replace": "projects/bpi/src/environments/environment.ts",
                  "with": "projects/bpi/src/environments/environment.prod.ts"
                },
                {
                  "replace": "projects/mts/src/environments/environment.ts",
                  "with": "projects/mts/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }

{
  "name": "hidden-name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "test-dev": "ng test --watch=true --browsers=Chrome",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "nghm": "node --max_old_space_size=8096 ./node_modules/@angular/cli/bin/ng"
  },
  "private": true,
  "dependencies": {
    "@angular-material-components/datetime-picker": "^5.1.0",
    "@angular/animations": "~11.2.4",
    "@angular/cdk": "~11.2.3",
    "@angular/common": "~11.2.4",
    "@angular/compiler": "~11.2.4",
    "@angular/core": "~11.2.4",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "~11.2.4",
    "@angular/localize": "^11.2.4",
    "@angular/material": "^11.2.3",
    "@angular/platform-browser": "~11.2.4",
    "@angular/platform-browser-dynamic": "~11.2.4",
    "@angular/router": "~11.2.4",
    "@microsoft/signalr": "^3.1.12",
    "@ngrx/effects": "^11.0.1",
    "@ngrx/router-store": "^11.0.1",
    "@ngrx/store": "^11.0.1",
    "@ngrx/store-devtools": "^11.0.1",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "i": "^0.3.6",
    "inputmask": "^5.0.5",
    "lodash-es": "^4.17.21",
    "ng-trim-value-accessor": "^3.0.2",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-mask": "^11.1.4",
    "ngx-material-timepicker": "^5.5.3",
    "ngx-toastr": "^12.0.0",
    "npm": "^6.14.11",
    "rxjs": "~6.5.4",
    "showdown": "~1.9.1",
    "svg-inline-loader": "^0.8.2",
    "tslib": "^2.0.0",
    "webfontloader": "^1.6.28",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.3",
    "@angular/cli": "~11.2.3",
    "@angular/compiler-cli": "~11.2.4",
    "@angular/language-service": "~11.2.4",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash-es": "^4.17.4",
    "@types/node": "^12.20.4",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-trx-reporter": "^0.4.3",
    "ng-packagr": "^11.2.4",
    "ngrx-store-freeze": "^0.2.4",
    "prettier": "^2.2.1",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.7",
    "xml2js": "^0.4.23"
  }
}

1 possible answer(s) on “Upgrading from v9 to v11 ng build/serve are very slow