How to customize build configuration with custom webpack config in Angular CLI 6

Background

In Angular CLI 1.x (Angular 5) we had a command called "ng eject" which ejected underlying webpack configuration so that you could make changes based on your requirements. This has been disabled with Angular CLI 6.

As you can see it will be completely removed in Angular CLI 8.0 version. In this post, I will show you how you can customize your builds with custom webpack configuration without using ng eject. For this, we will use a library called angular-builders. This post assumes you have done necessary setup and have basic knowledge of Angular 6. I have written multiple posts previously on these. If you are not following it then take a look at the links in the related section at the end of this post.

This uses the concept of Builders. You can provide a builder of your own or can use one that is provided by the community.

How to customize build configuration with custom webpack config in Angular CLI 6

Let's start by adding new dependencies. Go to package.json and add following dependencies under devDependencies =

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

Make sure build-angular dependency is ~0.11.0. This is something that you may need to upgrade version for. We will see in a  moment how to use this. Once done go to your apps root folder and run -

• npm install

This should install the required additional dependencies in the node_modules folder in the same directory.


Now go to angular.json file. Here you need to change the builder from "@angular-devkit/build-angular:browser" to "@angular-builders/custom-webpack:browser".

NOTE: If you are building an universal app and would like to change server build configuration use @angular-builders/custom-webpack:server instead of @angular-builders/custom-webpack:browser.

Next, you need to add customWebpackConfig property to your build target options to point it to your custom webback config file.

"customWebpackConfig": {"path": "./custom-webpack.config.js"},

Now your angular.json build configuration should look something like -

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {"path": "./custom-webpack.config.js"},
            "outputPath": "dist/angular-demo",
            "index": "src/index.html",
            ....

Now you can create a file called custom-webpack.config.js in the root directory (Same place where the angular.json file exists).

In this file, you can add your custom webpack config. For example, if you want to add a custom loader for files with extension .example you can do something like below -

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.example$/,
        use: ["example-loader"],
        include: path.resolve(__dirname, "./")
      }
    ]
  }
};

NOTE: Unlike ng eject command this configuration will be merged with default angular build configuration. So you need to add configuration to this file which you wish to change/add (and not the whole thing).

How to use ng serve with custom webpack configuration we set up above?

If you wish to use ng serve with above setup - i.e with custom webpack configuration make following additional changes -

Inside serve target in angular.json file change "builder": "@angular-devkit/build-angular:dev-server" to "builder": "@angular-builders/dev-server:generic".

Your serve target should look something like below -

"serve": {
  "builder": "@angular-builders/dev-server:generic",
  "options": {
    "browserTarget": "angulardemo:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "angulardemo:build:production"
    }
  }
},

Now you can do an ng serve and custom webpack configuration changes we did will be used.

In the next post we will see how we can create a custom webpack plugin with setup in place. So stay tuned :)

Related Links

Angular Hello World example(OSFG)

Understanding angular application folder structure(OSFG)

Routing and navigation in Angular(OSFG)

Building nested components in Angular (OSFG)

Passing data between the nested component in Angular(OSFG)