Je viens de migrer une application d'Angular 11.2.7 à Angular 12. Tout fonctionne bien, sauf que lorsque je développe et utilise «Ng Serve», les temps de reconstruction sont beaucoup, beaucoup plus lents maintenant, au point où il se trouve frustrant.
Je suis sur un iMac M1, en utilisant le nœud 16.1.0, pour ce qu'il vaut.
La machine était rapide à la foudre aux reconstructions de développement (sous-deuxième) avant de passer à Angular 12. Maintenant, si je change une seule ligne de code, même si je change simplement une lettre dans un journal de console, les temps de construction sont de 23 secondes , dont environ 22 secondes sont prises avec "phase: scellant".
J'ai également remarqué que tout s'étend maintenant à partir d'un 'Main.js diminue Dites, Ng Serve maintenant semble faire quelque chose comme une version de production à chaque fois que je change quoi que ce soit. Je pense que c'est la cause profonde de la lenteur, mais je ne suis pas sûr.
SO. . .
devrais-je encore utiliser «ng servir» pour le développement dans Angular 12?
Existe-t-il une option qui doit être définie lorsque vous migrez, peut-être pour désactiver les reconstructions minifiées complètes, pour maintenir l'ancienne vitesse de construction?
Qu'est-ce que cette «phase de scellement», de toute façon? Cela ressemble à un terme de construction de production pour moi!
merci
John
4 Réponses :
La CLI angulaire a été mise à jour avec V12 pour que l'environnement de développement soit plus comme la production.
ou comme ils aiment l'appeler:
Le but de ces modifications est de réduire la complexité de configuration et de prendre en charge la nouvelle initiative "Builds de production par défaut".
À en juger par ce qu'ils ont changé, vous devez mettre à jour votre angular.json et mettre à jour les projets . {project_name} .architect.build.defaultConfiguration Chemin:
ng update @angular/cli --migrate-only --from 11 --to 12
J'ai pris votre réponse comme point de départ et j'ai fait ceci: a créé une toute nouvelle application Angular 12, DiffFed Angular.json dans l'application migrée contre Angular.json dans la nouvelle application (il y a beaucoup de différences, trop pour mentionner ici! ) et a mis l'application migrée en ligne avec la nouvelle application. Il est encore très rapide. Merci!
La fonction "Comparer les fichiers sélectionnés" dans Visual Studio Code est Brilliant pour la diffusion en direct et modifiable de deux fichiers pour les mettre en ligne, d'ailleurs.
@John Avez-vous essayé la commande migrée que j'ai donnée? Il aurait dû faire l'astuce aussi: D
Je l'ai essayé, mais cela m'a donné une erreur et n'a changé aucun fichier de configuration. Je m'inquiète légèrement qu'il puisse y avoir d'autres fichiers qui, comme Angular.json, doivent être migrés. La mise à jour du matériel angulaire a changé certains CSS, mais rien d'autre n'a été changé dans la mise à niveau.
@Poulkruijt merci, cela a fonctionné pour moi! Veuillez noter que je devais également définir: (...). Build.defaultConfiguration à "Development" . Sinon, c'était implicitement la production. La migration automatisée angulaire ne l'a pas fait pour moi, car j'ai utilisé un constructeur personnalisé @ angular-builders / personnalisé-webpack: dev-server . Voir le code srouce de la migration: github.com/angular/angular-cli/blob/master/packages/schemati cs /…
Merci! C'était enfin ce qui a résolu tous mes problèmes angulaires! Merci @poulkruijt, ces informations devraient être plâtrées partout dans les documents angular.io et nx. Aurait me rendu la vie beaucoup plus facile! Je suis aux prises avec des services lents depuis une semaine entière maintenant. Merci encore.
Si vous copiez manuellement sur des bits à partir d'un Angular Clean.json (et que vous devriez absolument le faire), assurez-vous de ne pas manquer "DefaultConfiguration": "Development" sous servir .
Mon précédent Angular.json n'avait pas cela, ce qui aurait franchement pu être mon erreur - ou ce pourrait être une fonctionnalité qui est arrivée après coup. J'étais toujours obtenir une construction de production, ce qui est super frustrant car cela prend 3 minutes et rien ne vous dit quelle construction elle fait.
ng update @angular/cli --migrate-only --from 11 --to 12
vous ' Sachez que vous avez une construction de développement quand:
default-src_app_common-crm_common-crm_module_ts.js et non 34.js De plus, personnellement, je choisis de désactiver SourceMap . Cela rend ma compilation beaucoup plus rapide et je peux toujours activer si j'en ai vraiment besoin.
Il semble qu'il y ait un "comportement de bogue ' avec les migrations si vous les exécutez plus d'une fois. Si le paramètre aot est actuellement vrai, la migration le supprimera (car la valeur par défaut est vraie, donc elle est redondante). Cependant, si vous l'exécutez à nouveau (avec le paramètre AOT manquant), il sera écrit comme Faux et désactivé efficacement (car il pense que vous migrez de 11 où son absence signifiait faux et il pense que vous voulez il reste faux).
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angular12:build:production"
},
"development": {
"browserTarget": "angular12:build:development"
}
},
"defaultConfiguration": "development"
},
Ainsi, les migrations exécutées peuvent en fait donner l'illusion d'accélérer la construction, mais en réalité, il ne fait que désactiver AoT.
ne l'exécutez pas si vous avez déjà exécuté ng update et regardez votre fichier angular.json avec soin. Cela dit, je vois toujours des constructions prendre presque 3 fois plus longtemps qu'avant. C'est peut-être simplement WebPack 5, mais si c'est le cas, ils ont de toute urgence trouver une solution de contournement, car cela ne fonctionnera tout simplement pas pour moi.
github.com/angular/angular-cli/issues/20979
J'ai dû ajouter ce qui suit à ma configuration. Ma nouvelle application ne semblait pas avoir de configuration de "développement".
dans 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"
}
Merci pour cela, a amélioré mon projet à Angular 13 et avait les problèmes exacts de l'OP. Cette compilation a accéléré environ 20x.
Pareil ici. Passé de 11 à 13 et je n'ai pas compris pourquoi mes erreurs sont devenues illisibles. Merci beaucoup !
Je n'ai pas pu trouver de solution des autres réponses de ce post. J'ai finalement réussi à éliminer ce problème en exécutant ng update @ angular / cli - migrate uniquement mise à jour-angulaire-config-v12 . Remarque: Les migrations mentionnées dans la réponse acceptée ne fonctionnaient pas non plus pour moi, j'ai continué à obtenir une erreur indiquant que "le package n'a pas été installé".
J'ai le même problème après la mise à jour d'Angular 12, mais j'utilise TailWindCSS et je pensais que cela y est lié (PostCSS, Purge, etc.).
Je me demande si quelque chose a changé pour @ Angular-Devkit / Build-Angular: Dev-Server ...
Il y a un problème ouvert déjà