web-dev-qa-db-fra.com

angular-cli où est le fichier webpack.config.js - nouveau angular6 ne supporte pas l'éjection

MISE À JOUR: Décembre 2018 (voir la réponse 'Aniket')

Avec Angular CLI 6, vous devez utiliser des générateurs car ng eject est obsolète et sera bientôt supprimé de la version 8.0.

MISE À JOUR: Juin 2018: Angular 6 ne prend pas en charge l'éjection de ng **

UPDATE: février 2017: utilisation de l'éjection

MISE À JOUR: Novembre 2016: angular-cli utilise désormais uniquement WebPack. Vous devez uniquement installer normalement avec npm install -g angular-cli. "Nous avons changé le système de compilation entre beta.10 et beta.14, de SystemJS à Webpack.", Mais en fait, j'utilise angular-cli uniquement pour la structure et les dossiers des sapins, puis plus, j'utilise webpack config manuellement

J'ai installé clular angular avec ceci: 

npm install -g angular-cli@webpack

Lorsque je travaillais avec angular1 et Web Pack, je modifiais le fichier "webpack.config.js" pour exécuter toute la tâche et les plug-ins, mais je ne vois pas ce projet créé avec angular-cli qui le fait fonctionner. c'est magique? 

Je vois que Webpack fonctionne quand je fais:

ng serve 

"Version: webpack 2.1.0-beta.18"

mais je ne comprends pas comment fonctionne la configuration angular-cli ...

angularwebpackangular-cli
115
stackdave

Avec Angular CLI 6, vous devez utiliser des générateurs, car ng eject est obsolète et sera bientôt supprimé de la version 8.0. C’est ce qui est dit quand j’essaie de faire une éjection ng

 enter image description here

Vous pouvez utiliser le paquet angular-builders ( https://github.com/meltedspark/angular-builders ) pour fournir votre configuration Webpack personnalisée. 

J'ai essayé de résumer le tout dans un seul article de blog sur mon blog - Comment personnaliser la configuration de construction avec une configuration de WebPack personnalisée dans Angular CLI 6

mais essentiellement, vous ajoutez les dépendances suivantes -

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

Dans angular.json, apportez les modifications suivantes -

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

Notez le changement de générateur et la nouvelle option customWebpackConfig. Aussi changer

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

Remarquez à nouveau la modification dans le générateur pour la cible de service. Après avoir enregistré ces modifications, vous pouvez créer un fichier nommé custom-webpack.config.js dans votre même répertoire racine et y ajouter votre configuration Webpack.

Cependant, contrairement à ng eject, la configuration fournie ici sera fusionnée avec la configuration par défaut. Il vous suffit donc d'ajouter les éléments que vous souhaitez modifier/ajouter.

11
Aniket Thakur

Il existe un bon moyen d'éjecter webpack.config.js de angular-cli. Il suffit de courir:

$ ng eject

Cela générera webpack.config.js dans le dossier racine de votre projet, et vous êtes libre de le configurer comme vous le souhaitez. L’inconvénient est que les scripts de compilation/démarrage de votre package.json seront remplacés par les nouvelles commandes et 

$ ng serve

tu devrais faire quelque chose comme 

$ npm run build & npm run start

Cette méthode devrait fonctionner dans toutes les versions récentes de angular-cli (j'en ai personnellement essayé quelques-unes, la plus ancienne étant 1.0.0-beta.21 et la dernière 1.0.0-beta.32.3 )

149
Anton Nikiforov

Selon cette issue , la décision de ne pas autoriser les utilisateurs à modifier la configuration de Webpack pour réduire la courbe d’apprentissage était une décision de conception.

Compte tenu du nombre de configurations utiles sur Webpack, c'est un inconvénient majeur.

Je ne recommanderais pas l'utilisation de angular-cli pour les applications de production, car il fait l'objet d'une grande opinion.

44
Ignatius Andrew

La configuration webpack de la CLI peut maintenant être éjectée. Vérifiez réponse d'Anton Nikiforov .

dépassé:

Vous pouvez pirater le modèle de configuration dans angular-cli/addon/ng2/models. Il n'y a pas de moyen officiel de modifier la configuration du webpack pour l'instant. 

Il existe à ce sujet un problème "sans problème" sur github: https://github.com/angular/angular-cli/issues/1656

11
j2L4e

Ce que je pense, c'est qu'avoir webpack soit facile lors de la sortie de la production. 

FYI: https://github.com/Piusha/ngx-lazyloading

0
Piusha

Selon la suggestion de ng eject, vous pouvez utiliser ngx-build-plus

Plusieurs projets peuvent être utilisés avec le nouveau format de configuration offrant les avantages de l’éjection sans maintenance aérien. Un de ces projets est ngx-build-plus trouvé ici: https://github.com/manfredsteyer/ngx-build-plus

0
Ravi Sevta