58

In previous versions of Angular there was an option for eject so that you could modify your webpack configuration as you please.
One of the most common use cases for this feature was adding custom webpack loaders.

In Angular 6 this option has been removed, so currently there is literally no way to get the webpack config (beside looking it up in angular source code).

Is there any way to add a custom webpack config to Angular application that uses @angular/cli 6+? Or alternatively, is there any way to "eject" the webpack config the new Angular CLI uses under the hood?

JeB
  • 11,653
  • 10
  • 58
  • 87

2 Answers2

80

You can use angular-builders library that allows you extending the existing browser and server targets (and more than that) with a custom webpack config.

The usage is pretty simple:

  1. Install the library: npm i -D @angular-builders/custom-webpack

  2. Modify your 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. Add extra-webpack.config.js to the root of your application

  4. Put the extra configuration inside extra-webpack.config.js (just a plain webpack configuration)

N.K
  • 2,220
  • 1
  • 14
  • 44
JeB
  • 11,653
  • 10
  • 58
  • 87
  • 1
    I can't get this working in my project. It doesn't load the extra-webpack.config.js at all. I installed all dependencies following the instructions. Any tips how to debug? – Timo Aug 18 '18 at 15:17
  • Please open an issue on github: https://github.com/meltedspark/angular-builders/issues. Specify your _angular.json_, your _package.json_ and your _extra-webpack.config.js_. – JeB Aug 18 '18 at 19:23
  • Posted an issue https://github.com/meltedspark/angular-builders/issues/19 – Timo Aug 19 '18 at 17:03
  • I want to do this for test build, is it possible? Could you provide some instructions on this? All I need to do is attach a plugin. – Jose Villalobos Aug 28 '18 at 14:47
  • Test builder for custom webpack not yet exists. You can open a feature request [here](https://github.com/meltedspark/angular-builders/). You are also welcome to make a PR for this ;) How do you want to modify the test build? – JeB Aug 29 '18 at 06:41
  • @meltedspark Thanks, I was looking for something like the Angular CLI Builder, your answer pointed me to the right direction. My original question is here if you have any input: https://stackoverflow.com/questions/52896779/angular-cli-build-how-can-i-create-a-custom-index-file-generator-to-generate-an – Kayes Oct 23 '18 at 04:17
  • Tried this but also having issues with cli 7.1.4. Schema validation failed with the following errors:Data path ".builders['browser']" should have required property 'class'. – returnvoid Jul 02 '19 at 19:54
  • I bet you've installed version 8 of the builders. You should use 7. – JeB Jul 02 '19 at 20:43
  • It's a good solution, but unfortunately I can't find any example about extending existing Angular CLI config file. I mean - I have to see what Angular CLI already generates for me, before I can think of correct overrides I should use in my builder override config. So, where do I find Angular's default generated webpack settings? – JustAMartin Feb 18 '20 at 12:39
  • 1
    @JustAMartin https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs – JeB Feb 18 '20 at 13:10
  • @JeB Just curious: how is [@angular-builders/custom-webpack](https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack) different from [@angular-devkit/build-webpack](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_webpack)? Are they both different solutions for the same problem, or do they solve two fundamentally different problems? Any comparisons between the two? – Kiran Mar 18 '20 at 20:08
  • 1
    The latter. `build-webpack` just runs a webpack build (or webpack-dev-server) with a configuration you provide. No other functionality involved. Think of it as a way to run webpack build with Angular CLI. `@angular-builders/custom-webpack` on the other hand runs default Angular build chain while allowing to customize this build by providing a *delta* Webpack config that complements the default build configuration. – JeB Mar 19 '20 at 15:19
  • @JeB Hi, with the latest version of your library is it possible to specify a particular config in a webpack.config.js that exports multiple configurations or is another separate config file required? – CrystalSpider Sep 17 '21 at 17:45
9

For Angular 8 @angular-builders/dev-server:generic has been deprecated and @angular-builders/custom-webpack:dev-server is being used instead, source: https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD.

On top of this you might need to run npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest if after migrating you would have seen the following error architect_1.createBuilder is not a function.

Daniel Danielecki
  • 8,508
  • 6
  • 68
  • 94