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

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

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

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.

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 )

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

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

Ce que je pense, c'est que le webpack serait facile lors de la sortie de production.

Pour info: https://github.com/Piusha/ngx-lazyloading

Selon la suggestion de ng ejectvous pouvez utiliserngx-build-plus

Il existe plusieurs projets qui peuvent être utilisés en conjonction avec le nouveau format de configuration qui offrent les avantages de l'éjection sans les frais de maintenance. Un de ces projets est ngx-build-plus trouvé ici: https://github.com/manfredsteyer/ngx-build-plus