angular-cli où se trouve le fichier webpack.config.js - le nouvel angular6 ne prend pas en charge ng eject


132

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é dans la version 8.0

MISE À JOUR: Juin 2018: Angular 6 ne prend pas en charge ng eject **

MISE À JOUR: Février 2017: utiliser ng eject

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

J'ai installé angular cli avec ceci:

npm install -g angular-cli@webpack

Quand je travaillais avec angular1 et web pack, j'avais l'habitude de modifier le fichier "webpack.config.js" pour exécuter toutes les tâches et tous les plugins, mais je ne vois pas sur ce projet créé avec angular-cli qui le fait. c'est magique?

Je vois que Webpack fonctionne lorsque je fais:

ng serve 

"Version: webpack 2.1.0-beta.18"

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


Il est intégré dans angular2 cli ajoute. Pas de magie simplement simplifiée.
Jorawar Singh

3
merci @MrJSingh, mais y a-t-il encore un fichier de configuration? ou fonctionne simplement avec angular-cli.json? je n'ai pas besoin de plus de plugins de configuration?
stackdave

C'est AT: node_modules \ @ngtools
bharatpatel

1
Angular 6.0.8 ne prend actuellement pas en chargeng eject
Robert Love

4
J'aime la façon dont OP met à jour la bonne réponse près d'un an après la publication.
Lumineux

Réponses:


34

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

entrez la description de l'image ici

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

J'ai essayé de tout résumer dans un seul article de blog sur mon blog - Comment personnaliser la configuration de construction avec une configuration 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"},

Remarquez le changement dans le générateur et la nouvelle option customWebpackConfig. Changer aussi

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

Notez à nouveau le changement de générateur pour la cible de diffusion. Publiez ces modifications, vous pouvez créer un fichier appelé custom-webpack.config.js dans votre même répertoire racine et y ajouter votre configuration webpack.

Cependant, contrairement à la configuration ng eject fournie ici, elle sera fusionnée avec la configuration par défaut, alors ajoutez simplement les éléments que vous souhaitez modifier / ajouter.


4
Agréable. Une méthode pour modifier la configuration du webpack doit être mentionnée dans la documentation angulaire. Cela aide les nouveaux arrivants comme moi.
Wajahath

Cette configuration de construction angulaire ne fonctionne pas pour moi, elle ng servese termine juste après 5 secondes sans sortie. Mon projet utilise angular cli 7 et angular core 5.
tedw

Dois-je modifier la scriptspropriété de package.json ?
Krishna Prashatt

Notez que, dans la version angular-builders pour Angular 8, " @angular-builders/dev-server:genericest obsolète. Utilisez à la @angular-builders/custom-webpack:dev-serverplace." Pourriez-vous mettre à jour cette réponse pour refléter cela?
Brian McCutchon

1
github.com/just-jeb/angular-builders/tree/master/packages/… - instructions très simples pour cela ... - fonctionne dans Angular 9 Universal Ivy
Jonathan

153

Il existe un bon moyen d'éjecter webpack.config.js de angular-cli . Exécutez simplement:

$ 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 construction / démarrage de votre package.json seront remplacés par les nouvelles commandes et au lieu de

$ 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 d'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 )


1
La seule frustration est qu'il éjecte uniquement la configuration de l'environnement de développement. Il y a un argument que vous pouvez ajouter au ng eject pour utiliser la configuration de production à la place, mais cela ne fonctionne pas actuellement github.com/angular/angular-cli/issues/5433
jtsnr

@bebebe github.com/angular/angular-cli/issues/4907 J'ai demandé à être sûr.
Kunepro

@bebebe s'il vous plaît voir ici stackoverflow.com/questions/42984558/…
Anton Nikiforov

@AntonNikiforov Comment configurer le webpack après son éjection? Je pense que le fichier de configuration Webpack a l'air si compliqué. La raison pour laquelle je l'éjecte est que je veux utiliser postcss dans mon projet mais que cli ne le prend pas en charge pour le moment.
Ng2-Fun

comment exécuter ng build -w? npm run build -w ne fonctionne pas, pareil pour ng build --prod et ng build -d "quelque chose"
Victor Bredihin

49

Selon ce problème , il s'agissait d'une décision de conception de ne pas permettre aux utilisateurs de modifier la configuration de Webpack pour réduire la courbe d'apprentissage.

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

Je ne recommanderais pas l'utilisation angular-clipour des applications de production, car il est très avisé.


8
Il n'est pas conseillé d'entrer dans une boîte noire jusqu'à ce que vous compreniez chaque flux de l'architecture, cela peut être très coûteux si certains ne sont pas pris en charge ou ne pourraient pas être personnalisés au milieu du développement d'un projet.
Ignatius Andrew

11

La configuration Webpack de la CLI peut maintenant être éjectée. Vérifiez la 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 aucun moyen officiel de modifier la configuration du webpack pour le moment.

Il y a un problème fermé "wont-fix" sur github à ce sujet: https://github.com/angular/angular-cli/issues/1656


1
enfin j'utilise ce squelette, angular-cli n'est pas prêt pour un vrai travail avec webpack, j'ai beaucoup de problèmes. Je vous conseille d'utiliser ceci: github.com/webpack/webpack-dev-server
stackdave

5
Je suis triste, le problème est clos car "ne sera pas mis en œuvre". :-(
monnef

1
Il existe également npmjs.com/~ngtools où vous pouvez obtenir le pack Web qui exécute la CLI autonome. Voir youtu.be/uBRK6cTr4Vk?t=7m57s
Mikeumus


En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.