CLI - Construire pour la production sur Angular

Une fois qu’une application Web est créée et prête à être déployée, nous exigeons qu’Angular compile tous les différents extraits de code en une seule version. La construction est compressée dans une taille plus petite.

Au cours de cette dernière étape, nous sommes obligés de rencontrer quelques problèmes mineurs. Cela peut être une expérience tellement frustrante, compte tenu des rigueurs que l’on a traversées pour créer l’application.

Il est facile de penser qu’il s’agit d’un problème isolé, mais même les nouveaux projets qui n’ont pas été trafiqués connaissent les mêmes problèmes. Un problème majeur qui a été rencontré est où main.js n’est pas créé ; alors il y aura d’autres avertissements comme:

1. Suppression de la fonction inutilisée.
2. Effets de site dans l’initialisation.

Comment résoudre CLI - Problèmes de construction

Avant de plonger dans les différentes solutions de travail, examinons différents paramètres de drapeau pour Angular :

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

Lorsque --prod est utilisé dans Angular, il configure certains paramètres non flaggables :

1. Ajoute un agent de service s’il est configuré dans .angular-cli.json.
2. Remplace process.env.NODE_ENV dans les modules par la valeur production (cela est nécessaire pour certaines bibliothèques, comme react).
3. Exécute UglifyJS sur le code.

Lorsqu’un projet est en cours de construction, des commandes telles que ng build --env=prod n’accomplissent pas un excellent travail de production de construction car elles ne compressent pas les fichiers. Une autre chose à retenir est de confirmer que AOT est implémenté. AOT est principalement actif par défaut.

La commande ng build --prod devrait fonctionner si Ahead of Time (AOT) est implémenté. Utilisez la commande ng build --prod --aot=false si cela ne fonctionne pas.

La commande ng serve --prod peut également fonctionner si la fonction d’activation de la production est activée dans Angular. Cette commande permet également d’accélérer considérablement le temps de chargement de l’application.