Update from angular 11 to Angular 16 resulted in builds taking hours to complete

Question

I have an ngular project that was in angular 11 and we started updating it to angular 16, this project has 3 libraries that continued very fast to build, and when I use this libraries in the angular application, the build is extremely slow, taking hours to complete

I updated the tsconfig to this

{
  "compileOnSave": false,
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "alwaysStrict": true,
    "noImplicitAny": true,
    "noPropertyAccessFromIndexSignature": false, 
    "noUnusedLocals": true,
    "strictNullChecks": false, 
    "strictPropertyInitialization": false, 
    "exactOptionalPropertyTypes": false, 
    "noImplicitThis": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "useUnknownInCatchVariables": true,
    "allowUnusedLabels": false,
    "allowUnreachableCode": false,

    "skipLibCheck": true,

    "baseUrl": "./",
    "outDir": "./dist/out-tsc",

    "allowSyntheticDefaultImports": true,

    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [ "ES2022", "dom" ],

    "paths": {
      "local/*": [ "./src/app/*" ]
    }

  },
  "angularCompilerOptions": {
    "compilationMode": "full",
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableI18nLegacyMessageIdFormat": false,
    "strictInputAccessModifiers": true,
    "strictTemplates": true,
    "enableIvy": true
  }
}

I would like to execute an command and detect what is slow on this build

I tried the ng build --verbose but the result wasn't helpfull

this is the result after hours

Is there any other configuration to show me what files are taking me the time to compile?

UPDATE: this is the CPU Profile of the problem

Also, can you try permanently deleting your node_modules folder, re-running `npm install` and then try your build again? — Jake Smith, Jun 21 '23 at 16:41
my node version is Node.js v18.16.0. and npm 9.5.1, i deleted and installed the node modules so many times, tried all combinations of versions, it continues slow and I can't get what is slowing down the build — Luiz Bicalho, Jun 21 '23 at 17:21
That is so strange. Not sure what could be going on. Do you have access to another machine to make sure its not an issue with the machine you are on? — Jake Smith, Jun 21 '23 at 20:21
We tested it in 4 different machines, after the first build and the cache it's much better, but the automated build doesn't work yet because of that — Luiz Bicalho, Jun 22 '23 at 00:36
Maybe try creating a new angular 16 app, and using the default tsconfig files (temporarily) to see if that makes a difference in build time. If it does, then you can use bisection method to figure out which configuration option is causing the issue? — Jake Smith, Jun 22 '23 at 15:19
I created a new app and it's still slow, @JakeSmith , I think there is something with the libs used in the project , but the build time of the libs are very fast — Luiz Bicalho, Jun 30 '23 at 12:24
Maybe this can help you https://github.com/angular/angular/issues/20105 — kemsky, Jul 28 '23 at 01:02

score 0 · Answer 1 · answered Aug 24 '23 at 20:11

Installed fresh Angular 16.2.0 version, two components only and refreshes to compile takes forever. Modifications I made - not seem to improve a whole a lot.... Not a big fun... ):

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters":false,
    "strictInputAccessModifiers": false,
    "strictTemplates": false
  }
}

But you removed all of the validations, I want the angular compiler to enforce the strictiest compilation possible — Luiz Bicalho, Aug 26 '23 at 18:49
This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34894396) — Sriharish S, Aug 29 '23 at 13:26

Update from angular 11 to Angular 16 resulted in builds taking hours to complete

1 Answers1