Customizing Angular CLI build — an alternative to ng eject

This and other articles are available for free on my personal blog. Make sure to sign up to get the latest and greatest!

So your Angular CLI project just went a bit beyond TODO app and you have to customize your build configuration.
The question is how?

Angular CLI 1.x ng eject VS Angular CLI builders

In Angular CLI 1.x (Angular 5) you had ng eject command for this, which was ejecting the whole underlying webpack configuration and allowing you to modify it as you please.

In Angular CLI 6 this command has been removed, and it will not come back. Instead there is a new concept called Builders.
With the new Angular CLI you can customize the build process by defining your own builders as well as using one of the builders provided by the community.

Extending underlying webpack configuration

So let’s go ahead and customize our build by extending the underlying webpack configuration:

• Install @angular-builders/custom-webpack:
  npm i -D @angular-builders/custom-webpack.
  Note that it requires @angular-devkit/build-angular>=0.7.0 so you might need to install it (if not yet installed):
  npm i -D @angular-devkit/build-angular
• In angular.json change the @angular-devkit/build-angular:browser builder to @angular-builders/custom-webpack:browser :

"architect": {
   ...
  "build": {
      "builder": "@angular-builders/custom-webpack:browser"
      "options": {
            ...
      }
  ...
}

• If you build a universal app and would like to modify your server build configuration use @angular-builders/custom-webpack:server instead of @angular-builders/custom-webpack:browser
• Add customWebpackConfig to the build target options :

"architect": {
   ...
  "build": {
      "builder": "@angular-builders/custom-webpack:browser"
      "options": {
            "customWebpackConfig": {
               "path": "./extra-webpack.config.js"
            }  
            ...
      }
  ...
}

Check out the full description of customWebpackConfig object here.

• Create extra-webpack.config.js in the root of your application (or whatever path you specified in angular.json).
• Fill it with extra configuration you need (plain webpack configuration).
• Note that in contrary tong eject this configuration will be merged with the default Angular build configuration so you only have to configure the part you want to change/add.
  For example, if you want to add another webpack loader, your webpack config will look like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.cool$/,
        use: 'cool-loader'
      }
    ]
  }
};

And what about ng serve?

Update:
Starting from @angular-builders/custom-webpack@8.0.0 the dev-server builder is part of custom-webpack . Therefore it’s enough replacing @angular-devkit/build-angular:dev-server inside the serve target with @angular-builders/custom-webpack:dev-server .

Previous versions (<8.0.0):

If you want to run ng serve with custom webpack configuration (given you performed all the above steps) you should do the following:

• Install @angular-builders/dev-server
• Replace @angular-devkit/build-angular:dev-server inside the serve target with @angular-builders/dev-server:generic
• Run ng serve

Additional sources

You can check out this electron-angular-native project for the example of
Electron Angular application with node addons built with Angular CLI.

What is next

In the next article we will learn how to create your own builder.

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.