148

UPDATE: December 2018 (see 'Aniket' answer)

With Angular CLI 6 you need to use builders as ng eject is deprecated and will soon be removed in 8.0

UPDATE: June 2018: Angular 6 does not support ng eject**

UPDATE: February 2017: use ng eject

UPDATE: November 2016: angular-cli now only use webpack. You only need install normally with npm install -g angular-cli. "We changed the build system between beta.10 and beta.14, from SystemJS to Webpack.", but actually i use angular-cli just to firs structure and folders and then anymore, i use webpack config manually

I've installed angular cli with this: 

npm install -g angular-cli@webpack

When I worked with angular1 and web pack , i used to modify "webpack.config.js" file to execute all the task and plugins, but i don't see on this project created with angular-cli who does it work. it's magic?

I see Webpack is working when i do:

ng serve 

"Version: webpack 2.1.0-beta.18"

but i don't understand the way that angular-cli config works...

Aniket Thakur
  • 66,731
  • 38
  • 279
  • 289
stackdave
  • 6,655
  • 9
  • 37
  • 56

4 Answers4

157

There's a nice way to eject webpack.config.js from angular-cli. Just run:

$ ng eject

This will generate webpack.config.js in the root folder of your project, and you're free to configure it the way you want. The downside of this is that build/start scripts in your package.json will be replaced with the new commands and instead of 

$ ng serve

you would have to do something like 

$ npm run build & npm run start

This method should work in all the recent versions of angular-cli (I personally tried a few, with the oldest being 1.0.0-beta.21, and the latest 1.0.0-beta.32.3)

Anton Nikiforov
  • 3,345
  • 3
  • 13
  • 18
  • 1
    The only frustration is that it only ejects the dev environment config. There is an argument you can add to the ng eject to use the production config instead but this currently doesn't work https://github.com/angular/angular-cli/issues/5433 – jtsnr Mar 31 '17 at 16:14
  • @bebebe https://github.com/angular/angular-cli/issues/4907 I've asked to be sure. – Kunepro Apr 05 '17 at 11:44
  • @bebebe please see here http://stackoverflow.com/questions/42984558/how-to-undo-angular-2-cli-ng-eject – Anton Nikiforov Apr 05 '17 at 18:51
  • @AntonNikiforov How to config the webpack after eject? I feel the webpack config file looks so complicated. The reason I eject it is because I want to use postcss in my project but cli doesn't support it right now. – Ng2-Fun May 12 '17 at 02:27
  • how to run ng build -w? npm run build -w doesn't work, the same for ng build --prod and ng build -d "something" – Victor Bredihin Oct 01 '17 at 13:31
  • @jtsnr :You can eject the production version of the webpack config by using the following command: ng eject --prod https://stackoverflow.com/questions/44401427/production-compilation-with-ejected-angular-4-application-produces-large-files – Satyam May 10 '18 at 09:18
  • @karina Just reset your branch (assuming you use git.) It should reset the package.json back to its original and remove the webpack file. Or just create a new project and look at the npm commands in the package.json. – Mattijs Jul 12 '18 at 06:53
  • @karina also remove ejected from the angular-cli.json file – Mattijs Jul 12 '18 at 07:02
  • 7
    ng eject is disabled in newer release – Naga Nov 11 '18 at 13:41
55

According to this issue, it was a design decision to not allow users to modify the Webpack configuration to reduce the learning curve.

Considering the number of useful configuration on Webpack, this is a great drawback.

I would not recommend using angular-cli for production applications, as it is highly opinionated.

d4nyll
  • 11,811
  • 6
  • 54
  • 68
Ignatius Andrew
  • 8,012
  • 3
  • 54
  • 54
  • 9
    Its not advised to enter a blackbox untill you understand every flow of the architecture, It can be very costly if some is not supported or couldn be customized in middle of a project development. – Ignatius Andrew Oct 17 '17 at 04:59
38

With Angular CLI 6 you need to use builders as ng eject is deprecated and will soon be removed in 8.0. That's what it says when I try to do an ng eject

enter image description here

You can use angular-builders package (https://github.com/meltedspark/angular-builders) to provide your custom webpack config.

I have tried to summarize all in a single blog post on my blog - How to customize build configuration with custom webpack config in Angular CLI 6

but essentially you add following dependencies -

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

In angular.json make following changes -

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

Notice change in builder and new option customWebpackConfig. Also change

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

Notice the change in builder again for serve target. Post these changes you can create a file called custom-webpack.config.js in your same root directory and add your webpack config there.

However, unlike ng eject configuration provided here will be merged with default config so just add stuff you want to edit/add.

Aniket Thakur
  • 66,731
  • 38
  • 279
  • 289
  • 4
    Nice. A method to tweak into the webpack config should be mentioned in the angular docs. It helps newcomers like me. – Wajahath Dec 30 '18 at 08:08
  • This angular-builders setup doesn't work for me, `ng serve` just exits after 5 seconds with no output. My project uses angular cli 7 and angular core 5. – tedw Apr 11 '19 at 14:33
  • Is there any change I have to make in package.json's `scripts` property? – Krishna Prashatt Oct 08 '19 at 11:14
  • Note that, in the version of angular-builders for Angular 8, ["`@angular-builders/dev-server:generic` has been deprecated. Use `@angular-builders/custom-webpack:dev-server` instead."](https://github.com/just-jeb/angular-builders/blob/master/MIGRATION.MD#dev-server-builder) Could you update this answer to reflect that? – Brian McCutchon Nov 01 '19 at 20:06
  • 1
    https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack - very simple instructions for this... - works in Angular 9 Universal Ivy – Jonathan Apr 25 '20 at 06:58
11

The CLI's webpack config can now be ejected. Check Anton Nikiforov's answer.

outdated:

You can hack the config template in angular-cli/addon/ng2/models. There's no official way to modify the webpack config as of now.

There's a closed "wont-fix" issue on github about this: https://github.com/angular/angular-cli/issues/1656

Community
  • 1
  • 1
j2L4e
  • 6,914
  • 34
  • 40
  • 1
    finally i use this skeleton, angular-cli is not ready for real work with webpack, have a lot of problems. I advise use this: https://github.com/webpack/webpack-dev-server – stackdave Aug 29 '16 at 21:18
  • 5
    I am sad, the issue is closed as "won't implement". :-( – monnef Oct 04 '16 at 19:22
  • 1
    There is also http://npmjs.com/~ngtools where you can get the webpack that runs the CLI standalone. See https://youtu.be/uBRK6cTr4Vk?t=7m57s – Mikeumus Oct 21 '16 at 19:58