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

User · Accepted Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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  quot wont-fix quot  issue on github about this  https   github com angular angular-cli issues 1656

User · Answer

What I am thinking is having webpack would be easy when production release    FYI   https   github com Piusha ngx-lazyloading

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

Examples related to angular

Examples related to webpack

Examples related to angular-cli