Intento hacer muchas cosas para resolver ese problema, pero espero poder reducir mis cambios a dos puntos importantes:

1. actualizar angular 12.0.0 a angular 12.0.2
2. establezca defaultConfiguration en angular.json en 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 es importante para mí
• simplemente llame a ng serve , no se necesitan parámetros adicionales

 { "$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" }

Creo que los cambios en la velocidad se deben principalmente al paquete web 5. A menos que haya algún error horrible en Angular 12.

Instalé un complemento de paquete web SpeedMeasurePlugin . Para hacerlo, debe instalar @angular-builders/custom-webpack .

El archivo de configuración que usé fue algo como esto:

 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); module.exports = smp.wrap({ output: { scriptType: "module" }, plugins: [] });

Para mi proyecto que me dio el siguiente resultado.

Como puede ver, gran parte del tiempo se dedica a sass-loader (y posiblemente a css-loader).

Estoy buscando formas de almacenar en caché el sass. Creo que la mayor parte es de Angular Material.

Borré por completo mi archivo styles.css y terminé con:

El orden no es exactamente el mismo, pero el tiempo dedicado a sass en total parece ser considerablemente menor.

No estoy muy seguro de adónde ir desde aquí. Sass no es toda la historia y mi compilación aot sigue siendo extremadamente lenta. ¿Es ese paquete web 5? No estoy seguro.

Yo también actualicé una aplicación Angular 8 a 13 y noté una gran degradación en el tiempo de la fase de sellado durante el ciclo de edición y compilación (casi un minuto completo). Mi solución es la siguiente, ya que ninguna de las sugerencias que encontré me ayudó.

Independientemente de la nueva versión de Angular a la que haya actualizado, haga lo siguiente:

1. Genere una nueva aplicación (por ejemplo, ng new proj13 ) en la versión a la que está actualizando. Aquí, mantenga los valores predeterminados de creación del proyecto como se realizó en el proyecto anterior (por ejemplo, scss en lugar de css , enrutador o sin enrutador...)
2. Copie el nuevo angular.json tal como está del nuevo proyecto desechable al actualizado, o al menos asegúrese de volver a escribir el anterior para que se vea exactamente como el nuevo.
3. Asegúrese de que el nombre del proyecto sea el que se usa en las propiedades projects , browserTarget , outputPath ... en caso de que se produzca un cambio de nombre de archivo.

Una vez hecho esto, el ciclo de edición y compilación fue el "instantáneo" esperado, no más de milisegundos.

Creo que durante tales actualizaciones, el archivo angular.json no está recibiendo la atención de formato de nueva versión adecuada que necesita, como debería descubrir si inspecciona los formatos de archivo/claves/propiedades antiguos frente a los nuevos.