Angular 2 Avec assemblage CLI pour la production

Je viens d'installer angular-cli 1.0.0.beta.17 /dernier/, lancé un nouveau projet capable de servir le projet sur le port 4200 aucun problème - Juste un message standard "app works!".

Cependant, lorsque j'essaie de créer pour la production, il s'agit d'une application vide et universelle utilisant l'équipe
ng build --prod

, Je n'ai aucun fichier du tout main.*.js Et il y a plusieurs écrans d'avertissement, tels que:

Retourner une fonction inutilisée ...

Effets du site lors de l'initialisation ...

etc.

Ceci est un projet vide complètement vide. - Je n'ai eu aucune occasion de casser quelque chose ...

Comment construire une version de production ?
Invité:

Gabriel

Confirmation de:

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

Gregoire

Confirmation de:

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

Alice

Confirmation de:

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.

Agathe

Confirmation de:

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

Agathe

Confirmation de:

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

Gilbert

Confirmation de:

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/;

Georges

Confirmation de:

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é.

Hippolite

Confirmation de:

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

Gaetan

Confirmation de:

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

Pour répondre aux questions, connectez-vous ou registre