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

[MathewBerg]

🐞 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"
  }
}

[alan-agius4]

@MathewBerg, can you please share the project privately?

[MathewBerg]

Thanks @alan-agius4. While the upload is happening is there a command I can run that shows me timings and may help me diagnose?

[clydin]

Running the build with the environment variable NG_BUILD_PROFILING set to 1 should output several additional files with performance information: chrome-profiler-events.json and speed-measure-plugin.json.

If you could provide the contents of the application's tsconfig that would be helpful as well.
Also, Is the project using sass or another preprocessor for styles?

[MathewBerg]

@clydin thanks for the response, I'll try running with that env var. All the styles for our app are .scss

Here's the tsconfig (paths removed, there are 14)

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "paths": {
		...
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

[MathewBerg]

@clydin I ran ng build --prod after setting that flag to 1 and it took a few seconds but then stopped. There was a chrome-profile-events.json generated but it's 0KB, also no speed-measure-plugin.json was created.

[MathewBerg]

@alan-agius4 I'm not sure I'll be able share the code actually.

[clydin]

Does updating to v10 result in the performance issue as well?
A large amount of changes are present between v9 and v11. Narrowing down the range would be helpful in troubleshooting the issue.

[MathewBerg]

@clydin that will take a bit of time for me to try.

[farin]

It may be related but @angular-devkit/build-angular 0.1100.7 is the latest version on my machine compiling project in reasonable time. Any newer version cause rebuild time approx. 5 times higher.

So I simply usign downgraded angular-devkit/build-angular with latest other modules and all seems to be ok.
Please try

 "devDependencies": {
    "@angular-devkit/build-angular": "0.1100.7"
  }

and let know if does it help

[Splaktar]

Angular 11.2.5 has some significant compilation performance improvements. I think that they are mostly targeted at ng serve. Can you please give that a try and report your findings?

[alan-agius4]

@MathewBerg, In #20235 there was a lot of valuable information provided which was paramount to land a number of fixes in Angular CLI which would be available in 11.2.5 which should be released later on this week.

You can try to use the snapshot builds to verify the impact of these changes https://github.com/angular/angular-devkit-build-angular-builds

Rebuild times are also heavily effected by the assets #20244 and circular dependencies checker showCircularDependencies option. Try to disable the latter using the below command

ng config projects.my-project-name.architect.build.options.showCircularDependencies false

NB: Replace my-project-name with your application project name

[MathewBerg]

@Splaktar going to the latest angular helped somewhat, the build times for ng serve are a little more reasonable but still higher. I did try doing the upgrade path to 10 but there are errors that are presented so I think that might be fruitless.

@alan-agius4 thanks for the information! I will try that and eagerly await cli to hit 11.2.5. We have 34 files in our assets folder, but I will try running with showCircularDependencies set to false.

[montella1507]

number of fixes in Angular CLI which would be available in 11.2.5 which should be released later on this week.

are you sure it will be in 11.2.5? based on changelog + NPM , 11.2.5 was released 10.3.2021

I guess it will be in 11.2.6+ then

[MathewBerg]

@montella1507 angular is at 11.2.5 but the angular cli is still on 11.2.4: https://www.npmjs.com/package/@angular/cli

[montella1507]

Ah so, thank you.

[alan-agius4]

@MathewBerg, can you kindly update to the latest Angular and Angular CLI latest versions and see if the problem persists?

You can use the below command to update:

ng update @angular/cli @angular/core

Thanks.

[MathewBerg]

@alan-agius4 doing that as we speak.

[MathewBerg]

@alan-agius4 some updates. Yes that helped, still a little slow. I've been spending the past week or so removing some circular dependencies as we may attempt to move to NX which doesn't like them either. That got another large chunk of time out. A11 now builds in a "reasonable" amount of time although still slower then before we may be able to roll with it. The last thing is the asset problem you mentioned. In #20244 there's a mention of adding resolutions, so I'll try that.

Thanks for all your help, I'll close this for now and follow that other one.

[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.}