Angular 2 avec CLI - build pour la production

Par Angulaire de la cli du wiki github, ce sont les façons les plus courantes pour lancer un dev et de la production de construire

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

il y a différents drapeaux par défaut qui affecteront les constructions --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 paramètres non-flaggables suivants:

• ajoute le service worker si configuré dans .angular-cli.json.
• Remplace process.env.NODE_ENV modules production valeur (ceci est nécessaire pour certaines bibliothèques, comme react).
• lance UglifyJS sur le code.

j'ai besoin de faire un peu de dépannage afin de faire fonctionner AOT. Quand j'ai couru:

ng build -- prod --aot=false

je voudrais obtenir renverra un message d'erreur similaire à

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

à l'origine, j'ai dû faire un remaniement de projet pour obtenir beaucoup de travail. Toutefois, ils peuvent être une solution si vous rencontrez cette erreur. Essayez

npm j' enhanced-resolve@3.3.0

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

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

essayez ceci

 ng build --env=prod

le système build utilise par défaut l'environnement dev qui utilise environment.ts, mais si vous n' ng build --env=prodenvironment.prod.ts sera utilisé à la place.

exemple de résultat si votre projet est une nouvelle application de cli angulaire.

 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 dans /dist sauf si vous avez changé outDirangular-cli.json

avec la version cli (1.0.1) utiliser:

ng build --prod

cela vous donnera le dossier dist avec l'index.html et tous les fichiers JS prêts pour la production.

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

ng build --prod --aot=false

votre projet compile la compilation JIT et doit fonctionner si vous utilisez angular-cli.

si vous voulez construire avec la commande

ng build --prod --aot=true

alors ce sera une compilation AOT et vous devrez mettre à jour main.ts fichier 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);

si Aot est ou n'est pas implémenté.

Si Aot est mis en place :

ng build --prod

Si Aot n'est pas implémentée :

ng build --prod --aot=false

vous voulez L'AOT, ce qui est implicite par l'utilisation du -prod switch. Malheureusement, lorsque le CLI angulaire se brise, les messages d'erreur ne sont pas utiles. C'est comment je l'ai résolu:

npm install enhanced-resolve@3.3.0

j'ai vu certains mentionner que la mise à jour de la version de CLI angulaire au moins 1.2.6. contourne le problème aussi bien, mais ne l'ont pas testé encore.

il y a beaucoup de commandes pour construire l'application angulaire au mode de production en utilisant le cli angulaire.

ng build -- env=prod

une fois que vous aurez exécuté cette commande dans le répertoire cmd dist, le répertoire par défaut se créera et contiendra tous les fichiers miniaturisés liés à la compilation prod, mais il ne définira pas le chemin de base dans l'index.HTML. À la modification de l'indice.html soit aller et faire la modification manuelle comme ajouter le (.) IE.

<base href="./">

vous pouvez également passer le paramètre en construisant le code en mode prod en utilisant la commande angulaire/CLI.

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

il y a aussi d'autres commandes à construire comme passer l'AOT et build-optimizer ( pour réduire la taille des paquets).

ng build --prod --build-optimizer

si vous voulez changer le nom du dossier par défaut (dist) après la compilation, alors vous pouvez changer la valeur outDir dans le .angulaire de la cli.json.

ce sont des avertissements uglify js soit à partir de votre code source java script, soit à partir des bibliothèques tierces que vous utilisez dans votre projet.Pour l'instant vous pouvez les ignorer.

L'équipe de CLI angulaire travaille sur la suppression de ceci pour la construction de prod https://github.com/angular/angular-cli/pull/1609