Customizing Angular CLI 6 build  - an alternative to ng eject
Tags: angular, webdev, build, webpack
Published: 2018-07-27 16:00:53

---
title: Customizing Angular CLI 6 build  - an alternative to ng eject
published: true
description: How to extend your Angular CLI build configuration without ejecting and moving to pure webpack
tags: angular, webdev, build, webpack
cover_image: https://thepracticaldev.s3.amazonaws.com/i/w0vghhx2lirpj2a9jfn3.jpg
---

So your Angular 6 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 6 builders

In Angular CLI 1.x (Angular 5) you had [`ng eject`](https://github.com/angular/angular-cli/wiki/1-x-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 temporarily disabled, and I suspect that it will be deprecated soon due to the 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 lets go ahead and customize our build by extending the underlying webpack configuration:

- Install [@angular-builders/custom-webpack](https://github.com/meltedspark/angular-builders/packages/custom-webpack): `npm i -D @angular-builders/custom-webpack`. 
_Note that it requires version [@angular-devkit/build-angular](https://npmjs.com/package/@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`:

   ```js
    "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 :
   ```js
    "architect": {
       ...
      "build": {
          "builder": "@angular-builders/custom-webpack:browser"
          "options": {
                "customWebpackConfig": {
                   "path": "./extra-webpack.config.js"
                }  
                ...
          }
      ...
    }
   ```
   Check out the full description of `customWebpackConfig` object [here](https://github.com/meltedspark/angular-builders/tree/master/packages/custom-webpack#custom-webpack-config-object).
- 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 to `ng 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.  <br><br>
  For example, if you want to add another webpack loader, your webpack config will look like this:
   ```js
    module.exports = {
      module: {
        rules: [
          {
            test: /\.cool$/,
            use: 'cool-loader'
          }
        ]
      }
    };
   ```
## And what about ng serve?

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](https://github.com/meltedspark/angular-builders/tree/master/packages/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](https://github.com/meltedspark/electron-angular-native) project for the example of Electron Angular application with _node addons_ built with Angular CLI 6.

## What is next

In the [next article](https://dev.to/meltedspark/angular-cli-6-under-the-hood-builders-demystified-2975) we will learn how to create your own builder.