Acabo de migrar una aplicación de Angular 11.2.7 a Angular 12. Todo funciona bien, excepto que cuando estoy desarrollando y usando 'ng serve', los tiempos de reconstrucción son mucho, mucho más lentos ahora, hasta el punto en que es frustrante.
Estoy en un iMac M1, usando el nodo 16.1.0, por lo que vale.
La máquina fue ultrarrápida en las reconstrucciones de desarrollo (subsegundos) antes de pasar a Angular 12. Ahora, si cambio solo una línea de código, incluso si solo cambio una letra en un registro de la consola, los tiempos de compilación son 23 segundos, aproximadamente 22 segundos de los cuales se ocupan con "fase: sellado".
También me di cuenta de que ahora todo se ejecuta desde un "main.js" minificado, incluso cuando ng sirve. Me parece recordar que la versión 11 no hizo eso, pero ejecutó componentes individuales no minificados durante el desarrollo. Es decir, ng Serve ahora parece estar haciendo algo así como una compilación de producción completa cada vez que cambio algo. Creo que esa es la causa raíz de la lentitud, pero no estoy seguro.
Entonces . . .
¿Debería seguir usando 'ng serve' para el desarrollo en Angular 12?
¿Hay alguna opción que deba configurarse cuando realiza la migración, tal vez para desactivar las reconstrucciones minificadas completas, para mantener la velocidad de compilación anterior?
¿Qué es esta 'fase de sellado', de todos modos? ¡Suena como un término de compilación de producción para mí!
Gracias
Juan
Si está copiando manualmente fragmentos y piezas de un angular.json limpio (y absolutamente debería hacerlo), asegúrese de no perderse "defaultConfiguration": "development" en serve .
Mi angular.json anterior no tenía esto, lo que, francamente, podría haber sido mi error, o podría ser una característica que apareció después del hecho. Todavía estaba obteniendo una compilación de producción, lo cual es muy frustrante porque toma 3 minutos y nada te dice qué compilación está haciendo.
"serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "angular12:build:production" }, "development": { "browserTarget": "angular12:build:development" } }, "defaultConfiguration": "development" },Sabrá que tiene una compilación de desarrollo cuando:
default-src_app_common-crm_common-crm_module_ts.js y no 34.js Además, personalmente elijo desactivar sourceMap . Hace que mi compilación sea mucho más rápida y siempre puedo habilitarla si realmente la necesito.
Parece que hay un "comportamiento similar a un error" con las migraciones si las ejecuta más de una vez. Si la configuración aot actualmente es verdadera, la migración la eliminará (porque el valor predeterminado es verdadero, por lo que es redundante). Sin embargo, si lo vuelve a ejecutar (sin la configuración aot), se escribirá como false y se deshabilitará de manera efectiva (porque cree que está migrando desde 11 donde su ausencia significaba falso y cree que quiere que siga siendo falso).
ng update @angular/cli --migrate-only --from 11 --to 12Por lo tanto, ejecutar migraciones en realidad puede dar la ilusión de acelerar la compilación, pero en realidad solo está deshabilitando aot.
En otras palabras, no ejecute esto si ya ejecutó ng update y mire su archivo angular.json cuidado.
El cli angular se actualizó con v12 para que el entorno de desarrollo se parezca más a la producción.
O como les gusta llamarlo:
El objetivo de estos cambios es reducir la complejidad de la configuración y admitir la nueva iniciativa de "construcciones de producción por defecto".
A juzgar por lo que han cambiado, debe actualizar su angular.json y actualizar los projects.{PROJECT_NAME}.architect.build.defaultConfiguration path:
"defaultConfiguration": "development"Leer más aquí
Si no usó el comando ng update , pero actualizó manualmente usando npm , debe ejecutar migraciones. Específicamente, el estilo del material tuvo algunos cambios que pueden causar largos tiempos de construcción si no se migran. Para desencadenar estas migraciones, ejecute:
ng update @angular/cli --migrate-only --from 11 --to 12No pude encontrar una solución de las otras respuestas en esta publicación. Finalmente logré eliminar este problema ejecutando ng update @angular/cli --migrate-only update-angular-config-v12 . Nota: las migraciones mencionadas en la respuesta aceptada tampoco me funcionaron, seguía recibiendo un error que decía "El paquete no estaba instalado".
Tuve que agregar lo siguiente a mi configuración. Mi nueva aplicación no parecía tener ninguna configuración de "desarrollo".
En angular.json
"configurations": { "development": { "optimization": false, "outputHashing": "all", "sourceMap": true, "namedChunks": true, "extractLicenses": false, "vendorChunk": true, "buildOptimizer": false, "budgets": [] } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "ui:build" }, "configurations": { "development": { "browserTarget": "ui:build:development" } }, "defaultConfiguration": "development" }