[Fixed] Angular 5 – Dev/QA build using ng build with uglify and minify (like ng build –prod)

Issue

I am using angular5 and angular-cli and have requirement to uglify/minify code which can be viewed in inspector tool of browser.
My angular-cli.json has:

"environmentSource": "environments/environment.ts",
"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
}

For production it is running fine by ng build –prod
But this can be used only for production enviornment.
I want to do same for dev enviornments but i am not able to acheive it.
I have already tried most of the options of build with value of prod except of –enviornment:

Flag                 --dev    --prod
--aot                false    true
--environment        dev      prod
--output-hashing     media    all
--sourcemaps         true     false
--extract-css        false    true
--named-chunks       true     false
--build-optimizer    false    true with AOT and Angular 5

For example

ng build --aot=true --output-hashing=all --sourcemaps=false --extract-css=true --named-chunks=false --build-optimizer true

But it is not working for me. Not creating uglified code for this enviornment(here dev).

how can I use same build command for other environments? How can i use prod optimisations in other environments?

Solution

If you want to use your dev environment.ts values with the --prod optimizations, just specify so with the flag:

ng build --prod --environment=dev

This applies the --prod settings but overrides --environment for which environment file will be used.

In newer Angular CLI versions with the change to angular.json, replace --environment with --configuration. Since the default configuration uses environment.ts, just pass an empty string to it so the environment file doesn’t get overwritten, e.g --prod --configuration=