Angular-cli: Cannot run production build for ejected projects

[dagi12]

Problem

I think title is quite self-explanatory here. Before app ejection I run
ng build -prod
For building production app. Unlike usual build this minify my project and does some other things.
After ejection there is a webpack configuration which as I think corresponds to usual build. There's no webpack configuration for production environment.

Possible fix

Project ejection should create production webpack configuration that will reflects ng build -prod behavior. And add webpack --config -p webpack.config.prod.js to scripts in package.json

[hansl]

You can do this by using ng eject --prod. The eject command runs with the same flags as the build command.

[dagi12]

I've already figure this out. That's why I closed the issue ;)

[creat-or]

OK I think don't understand how eject is meant to be... Why can't I eject the project and have a development AND production environment afterwards?
I thought eject is like you do it once and then you cannot use angular-cli features anymore, but you're more flexible in configuration? So how am I supposed to make custom changes (https://github.com/angular/angular-cli/issues/5362#issuecomment-310298275) and build for development and production afterwards?
Thank's for every help!

[bennett000]

@creat-or you can it's just how you do so can get opinionated pretty quickly.

One common approach is to to have an environment variable , like NODE_ENV and set it prior to builds. Then in your webpack config test against it like const isProd = process.env.NODE_ENV === 'production' ? true : false;

Then later in your config you can use isProd to make choices about what plugins to use etc...

Taking a deeper dive would go waaay off topic. I bet there are blog posts about this somewhere.

[khalid-elabbadi]

i think in an angular-cli ejected project the command yarn run build (npm run build) must be smart and read arguments --prod -aot and pass them to webpack. That way things will run better and we stay on the same path as ng build options

[lifenautjoe]

Can we re-open this? @dagi12.

Also whenever you do an ng eject --prod you must manually remove all package.json scripts and the webpack.config.jsfile in order for it to work.

[dagi12]

Reopened

[PeterShershov]

Hey guys, any progress regarding this?

[vincentjames501]

+1. Seems like ng eject should allow passing similar arguments to webpack for generating a production build.

[hikumealan]

+1 Additionally, I would like to see --code-coverage supported on the test command.

[bennett000]

@hikumealan I think the code coverage in CLI works out of the box, at least with HTML/lcov. Plus IIRC the karma config is customizable with or _without_ ejecting.

[GJordan904]

I ran into this issue after running ng eject and found this issue. It isn't very difficult to work around, just more hassle than it should be and shouldn't require a workaround at all.

IMHO running ng eject should spit out a webpack.dev.config and a webpack.prod.config. It should also create npm scripts for build:prod, and watch, in addition to the other scripts it creates.

So until an official solution presents itself, here's my workaround.

1. run ng eject
2. rename webpack.config.js to webpack.dev.config.js
3. delete all the npm scripts in package.json
4. run ng eject --prod
5. (optional) rename the new webpack.config.js to webpack.prod.config.js
6. setup your npm scripts in package.json
7. run npm i

And here is what my npm scripts look like when I'm done.

"scripts": {
    "build": "webpack --config webpack.dev.config",
    "watch": "webpack --watch --config webpack.dev.config",
    "build:prod": "webpack --config webpack.prod.config",
    "start": "webpack-dev-server --port=4200 --config webpack.dev.config",
    "test": "karma start ./karma.conf.js",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
    "e2e": "protractor ./protractor.conf.js"
  }

[phil123456]

it would be way more productive to be able to customize ng CLI build script instead of trying to merge dev/prod (generated) scripts based the the ENV variable

the differences between the two generated files are huge and such a process is really prone to mistakes

so far I copy 2 versions (dev and prod) of the ejected web pack config and the create a new webpack.config.js file:

if(process.env.npm_lifecycle_event=='build')
{
  module.exports = require('./dev.config');
}
else if(process.env.npm_lifecycle_event=='build-prod')
{
  module.exports = require('./prod.config');
}

//----------------------------------------------------------------------------------------------------------

// here I eventualy modify  "module.exports" variable
...

so I can update cli and redo the ejection if needed and have a separate custom config

[clydin]

eject functionality is no longer available in the latest version (6.0+). For custom webpack configurations the following unofficial add-on is a suggested solution: https://github.com/manfredsteyer/ngx-build-plus

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}