web-dev-qa-db-fra.com

Angular 2 avec CLI - construit pour la production

J'ai fraîchement installé angular-cli 1.0.0.beta.17 (la plus récente), je lance un nouveau projet, capable de servir le projet sur le port 4200 sans aucun problème - il suffit d’appliquer des "applications standard"! message.

Cependant, lorsque j'essaie de générer pour la production cette application vide et générique à l'aide de la commande ng build --prod Je n'ai pas créé de fichier principal. *. Js et j'ai quelques écrans d'avertissements tels que:

  • Laisser tomber la fonction inutilisée ...
  • Effets de site en initialisation ...
  • etc

C'est un tout nouveau projet vide - je n'ai encore rien eu à casser ...

Comment construire la version de production?

angularbuildproductionangular-cli
26
bensiu

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

Plus de paramètres de drapeau ici

https://angular.io/cli/build

Pour github wiki v2 + de Angular-cli, ce sont les moyens les plus courants pour lancer une version 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 indicateurs par défaut qui affecteront les versions de --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 marquables suivants:

  • Ajoute un agent de service si configuré dans .angular-cli.json.
  • Remplace process.env.NODE_ENV dans les modules avec la valeur production (nécessaire pour certaines bibliothèques, comme react).
  • Lance UglifyJS sur le code.

Je dois faire quelques dépannages pour que AOT fonctionne. Quand j'ai couru:

ng build --prod --aot = false

Je voudrais obtenir retournera une erreur similaire à

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

À l’origine, j’avais dû refacturer un projet pour que AOT fonctionne. Cependant, ils peuvent être une solution si vous rencontrez cette erreur. Essayer

nPM i [email protected]

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

35
JoeF

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

5
omt66

Avec la version cli (1.0.1), utilisez:

ng build --prod

Cela vous donnera le dossier dist avec le fichier index.html et tout le fichier js fourni prêt pour la production.

3
Amit

essaye ça

 ng build --env=prod

Le système de construction utilise par défaut l'environnement de développement qui utilise environment.ts, mais si vous le faites ng build --env=prod puis environment.prod.ts sera utilisé à la place.

exemple de résultat si votre projet est nouveau angular cli app.

 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 sauf si vous avez changé outDir dans angular-cli.json

3
Majid

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

Si Aot est implémenté:

ng build --prod

Si Aot n'est pas implémenté:

ng build --prod --aot=false
1
abahet

Vous devez mettre à jour la dernière version de angular-cli, TypeScript. 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 il s’agit d’une 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);
1
aimprogman

Il y a beaucoup de commandes pour construire l'application angular en mode de production utilisant angular cli.

ng build --env = prod

Une fois que vous aurez exécuté cette commande, le dossier par défaut de cmd dist créera un répertoire contenant tous les fichiers minifiés liés à prod build, mais ne définira pas le chemin de base dans le fichier index.html. Pour changer dans index.html, allez soit et faites le changement manuel comme en ajoutant le (.) Ie.

<base href="./">

Vous pouvez également transmettre le paramètre lors de la création du code en mode prod à l'aide de la commande angular/CLI.

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

Il existe également d'autres commandes à construire, telles que le transfert de l'AOT et l'optimiseur de compilation (pour réduire la taille des ensembles).

ng build --prod --build-optimizer

Si vous souhaitez modifier le nom du dossier par défaut (dist) après la génération, vous pouvez modifier la valeur outDir dans le fichier .angular-cli.json.
enter image description here

1
Prabhat Maurya

Vous voulez l'AOT, ce qui est impliqué par l'utilisation du -prod _ commutateur. Malheureusement, lorsque Angular CLI elle-même se brise, les messages d'erreur ne sont pas utiles. Voici comment j'ai résolu le problème:

npm install [email protected]

J'ai trouvé la solution très loin sur cette page: https://github.com/angular/angular-cli/issues/711

J'ai vu certaines personnes mentionner que la mise à jour de Angular de la CLI vers la version 1.2.6 au moins) résout également le problème, mais ne l'a pas encore testé.

1
Cobus Kruger

Ce sont des avertissements uglify js provenant de votre code source Java-script ou des bibliothèques tierces que vous utilisez dans votre projet. Pour le moment, vous pouvez les ignorer.

L’équipe de cli angulaire travaille à la suppression de ce problème pour la construction de la génération https://github.com/angular/angular-cli/pull/1609

0
Muralikrishnan