angular-cli where is webpack.config.js file - new angular6 does not support ng eject

Question

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...

Revocable

It's in built in angular2 cli adds on. No magic just simplified. – Captain

thanks @MrJSingh , but is there a config file yet? or simply works with angular-cli.json? i dont need more config plugins ? – Revocable

It is AT: node_modules\@ngtools – Whoosh

Possible duplicate of Where is the webpack.config.js in angular-cli new project? – Abbreviation

Angular 6.0.8 currently does not support ng eject – Selfpropelled

Looks this will come back in 6.1 or 6.2 (github.com/angular/angular-cli/issues/11105) – Disfrock

I like how OP is updating the correct answer almost a year after posting. – Unspotted

Answer 1

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

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.

Conjuration

Nice. A method to tweak into the webpack config should be mentioned in the angular docs. It helps newcomers like me. – Chang

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. – Miles

Is there any change I have to make in package.json's scripts property? – Waltz

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." Could you update this answer to reflect that? – Penney

github.com/just-jeb/angular-builders/tree/master/packages/… - very simple instructions for this... - works in Angular 9 Universal Ivy – Huygens

Answer 2

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)

Baa

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 github.com/angular/angular-cli/issues/5433 – Cabaret

@bebebe github.com/angular/angular-cli/issues/4907 I've asked to be sure. – Devereux

@bebebe please see here #42985058 – Baa

@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. – Mezuzah

how to run ng build -w? npm run build -w doesn't work, the same for ng build --prod and ng build -d "something" – Nephew

@Cabaret :You can eject the production version of the webpack config by using the following command: ng eject --prod #44401927 – Williamwilliams

@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. – Ashti

@karina also remove ejected from the angular-cli.json file – Ashti

ng eject is disabled in newer release – Realty

Answer 3

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.

Melanesian

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. – Melanesian

Answer 4

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

Tribade

finally i use this skeleton, angular-cli is not ready for real work with webpack, have a lot of problems. I advise use this: github.com/webpack/webpack-dev-server – Revocable

I am sad, the issue is closed as "won't implement". :-( – Sevilla

There is also npmjs.com/~ngtools where you can get the webpack that runs the CLI standalone. See youtu.be/uBRK6cTr4Vk?t=7m57s – Sandhog