web-dev-qa-db-fra.com

Angular Configuration du pack Web personnalisé de la CLI

Dans les versions précédentes de Angular, il existait une option pour éjecter afin que vous puissiez modifier la configuration de votre pack Web à votre guise.
L'un des cas d'utilisation les plus courants de cette fonctionnalité a été l'ajout de chargeurs de packs Web personnalisés.

Dans Angular 6, cette option a été supprimée. Il n’existe donc actuellement aucun moyen de récupérer la configuration WebPack (à part la recherche dans le code source angular.).

Existe-t-il un moyen d’ajouter une configuration webpack personnalisée à l’application Angular utilisant @ angular/cli 6+? Ou bien, existe-t-il un moyen "d'éjecter" le pack Web config par la nouvelle Angular CLI utilisée sous le capot?

angularwebpackangular-cliwebpack-loader
26
JeB

Avertissement: je suis le propriétaire de la bibliothèque ci-dessous

Vous pouvez utiliser la bibliothèque angular-builders qui vous permet d’étendre les cibles browser et server existantes avec une configuration Webpack personnalisée.

L'utilisation est assez simple:

  1. Installez la bibliothèque: npm i -D @angular-builders/custom-webpack

  2. Modifiez votre angular.json :

    "architect": {
   ...
   "build": {
       "builder": "@angular-builders/custom-webpack:browser"
       "options": {
              "customWebpackConfig": {
                 "path": "./extra-webpack.config.js",
                 "replaceDuplicatePlugins": true
              },
              "outputPath": "dist/my-cool-library",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "src/tsconfig.app.json"
              ...
       }
  3. Ajoutez extra-webpack.config.js à la racine de votre application
  4. Placez la configuration supplémentaire dans extra-webpack.config.js (une configuration simple de webpack)

Ici vous pouvez trouver un exemple qui ajoute node-loader à la configuration du navigateur.

Lectures supplémentaires:
Personnalisation Angular Construction de la CLI - Une alternative à la suppression de l'éjection

33
JeB

Pour Angular 8 @angular-builders/dev-server:generic est obsolète et @angular-builders/custom-webpack:dev-server est utilisé à la place, source: https://github.com/just-jeb/angular-builders/ blob/master/MIGRATION.MD .

En plus de cela, vous devrez peut-être exécuter npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest si après la migration, l'erreur suivante architect_1.createBuilder is not a function aurait été détectée.

2
Daniel Danielecki