Angular 2 Avec assemblage CLI pour la production

Mis à jour pour Angular v6+

# Prod - these are equivalent

ng build --configuration=production

ng build --c=production

ng build --prod=true



# Dev - and so are these

ng build --configuration=development

ng build --c=development

ng build --prod=false

ng build

En savoir plus sur les paramètres d'indicateur lire ici

https://angular.io/cli/build
Selon Angular-cli github wiki v2+, Ce sont les moyens les plus courants d'initier l'assemblage de développement et de production.

# 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

Il existe différents drapeaux par défaut qui affecteront l'assemblage. --dev vs --prod.

Flag --dev --prod

--aot false true

--environment dev prod

--output-hashing media all

--sourcemaps true false

--extract-css false true

--prod

Définit également les réglages non passés suivants:

Ajoute service worker, S'il est configuré dans

.angular-cli.json

.

Relecture

process.env.NODE_ENV

En modules signifiant

production

/Cela est nécessaire pour certaines bibliothèques, telles que react/.

Lancement UglifyJS dans du code.

Je dois faire un dépannage afin de savoir AOT travail. Quand j'ai couru:

Ng build-proda --ad = false

J'aurais obtiendrai l'erreur similaire

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

Initialement, j'ai dû dépenser un projet de refactoring pour forcer AOT travailler. Cependant, ils peuvent être corrigés si vous avez rencontré cette erreur. Essayer

npm J'ai augmenté la résolution@3.3.0.

https://github.com/angular/angular-cli/issues/7113

Essayez d'utiliser: ng build --target=production
Cela devrait fonctionner.

Avec la version cli /1.0.1/ Utilisation :

ng build --prod

Cela vous donnera un dossier dist de index.html Et le fichier JS complet complet est prêt pour la production.

essayer

ng build --env=prod

Le système d'assemblage par défaut utilise l'environnement de développement qui utilise

environment.ts

, Mais si tu le fais

ng build --env=prod

, Puis au lieu de cela sera utilisé

environment.prod.ts

.

Exemple de résultat si votre projet est une nouvelle application angular cli.

10% building mod3439ms building modules 1ms add01564ms 917ms asset45ms emittingHash: 9216e76d6f10637c945c 

Version: webpack 2.1.0-beta.22

Time: 6358ms

 Asset Size Chunks Chunk Names

 main.bundle.js 2.6 MB 0, 2 [emitted] main

 styles.bundle.js 10.2 kB 1, 2 [emitted] styles

 inline.js 5.53 kB 2 [emitted] inline

 main.map 2.61 MB 0, 2 [emitted] main

 styles.map 14.2 kB 1, 2 [emitted] styles

 inline.map 5.59 kB 2 [emitted] inline

 index.html 482 bytes [emitted] 

assets/.npmignore 0 bytes [emitted] 

chunk {0} main.bundle.js, main.map /main/ 2.06 MB {1} [initial] [rendered]

chunk {1} styles.bundle.js, styles.map /styles/ 9.96 kB {2} [initial] [rendered]

chunk {2} inline.js, inline.map /inline/ 0 bytes [entry] [rendered]

Child html-webpack-plugin for "index.html":

 Asset Size Chunks Chunk Names

 index.html 2.82 kB 0 

 chunk {0} index.html 350 bytes [entry] [rendered]

Fait et c'est sous /dist, Si vous n'avez pas changé

outDir

dans

angular-cli.json

Peu importe si AOT est mis en œuvre ou non.

Si un AOT sera mis en œuvre :

ng build --prod

Si AOT n'est pas implémenté :

ng build --prod --aot=false

Vous devez mettre à jour la dernière version angular-cli, typescript.
Si vous utilisez la commande:

ng build --prod --aot=false

Votre projet est compilé JIT compilation et doit être travaillé si vous utilisez angular-cli.

Si vous voulez construire à l'aide de la commande

ng build --prod --aot=true

Alors ce sera la compilation AOT, Et vous devez mettre à jour le fichier main.ts dans:

import { enableProdMode } from '@angular/core';

import { platformBrowser } from '@angular/platform-browser';



import { AppModule } from './app/app.module';

import { environment } from './environments/environment';



if /environment.production/ {

 enableProdMode//;

}



platformBrowser//.bootstrapModuleFactory/AppModule/;

Veux-tu AOT, Qu'est-ce que cela signifie lors de l'utilisation du commutateur

-prod

. Malheureusement quand Angular CLI Elle-même casse, les messages d'erreur n'aident pas. C'est comme ça que j'ai résolu ce problème:

npm install enhanced-resolve@3.3.0

J'ai trouvé une solution très loin de cette page:
https://github.com/angular/angular-cli/issues/7113
J'ai vu des références à la version de mise à jour Angular CLI au moins 1.2.6. Résout également ce problème, mais n'a pas encore vérifié.

Il existe de nombreuses commandes pour transférer l'application. angular En mode de travail en utilisant angular cli.

Ng build-ok = prod


Dès que vous exécutez cette commande sur cmd dist, Le dossier par défaut sera créé, qui contiendra tous les fichiers réduits associés à prod build, mais elle n'installera pas le chemin de base dans index.html.
Changer B. index.html soit aller et faire un changement manuel comme ajoutant /./ ie.

<base href="./"/>

Vous pouvez également transférer ce paramètre lors de la construction d'un code en mode prod Avec l'aide de l'équipe angular/CLI.

ng build --base-href=./ --env=prod

Il y a d'autres équipes pour l'assemblée, telles que le transfert AOT et Build-optimizer / Réduire les tailles bundle/.

ng build --prod --build-optimizer

Si vous souhaitez modifier le nom du dossier par défaut /dist/ Après montage, vous pouvez modifier la valeur outDir dans .angular-cli.json.

https://i.stack.imgur.com/i3i18.png

Ce sont des avertissements uglify js soit de votre code source java-script, soit des bibliothèques tierces que vous utilisez dans votre projet. En attendant, vous ne pouvez pas faire attention à eux.

Équipe Angular cli Travaille sur la suppression de cela pour l'assemblage prod
https://github.com/angular/angular-cli/pull/1609