Angular-cli: Production environment is not minifying resources

[bertolo1988]

I am running my server on production and i am noticing that none of the hosted resources is minified/uglified.

How do i need to run my project in order to have gzip compression and resources minification?

What is the environment 'production': false, attribute for ?

We have been discussing the problem countless times at my workplace. We have choosen to use ng serve for development only. How is everyone else doing ?

PS: keep up good work, angular-cli is getting better and better. thanks alot.

[clydin]

The production build target controls optimizations/hashing/minification/etc., not the environment.
Also, ng serve is purely for development purposes. Actual deployments should be using a hosting service or production appropriate web server.

[grizzm0]

Use ng build --prod --aot --no-sourcemap (pretty sure --aot and --no-sourcemap is default these days) to build for production.

Gzipping has been removed from the CLI itself. Your webserver could handle the gzipping for you or you could pipe on a gulp task or similar to compress your dist folder after build.

[bertolo1988]

@clydin, thanks for your answer.

The production build target controls optimizations/hashing/minification/etc., not the environment.

ng serve --environment=production is the same as ng serve --prod it is not!

ng serve is purely for development purposes

What is the production:false for then ?

@grizzm0, thanks for your answer.
Useful tips, thanks.

I would still like to know what is the developers answer on this questions.

[grizzm0]

ng serve --environment=production changes the environment, not the target. That would run a dev target with prod env.

[clydin]

'ng serve --prod' is the same as 'ng serve --target=production --environment=production'

[bertolo1988]

I didn't know that either! What is the difference?

[grizzm0]

The environment files are where you can put different type of configs depending on the environment. API urls etc etc. The default "production" key is used in main.ts to call enableProdMode(); which is part of angular itself.

[bertolo1988]

Thanks @grizzm0.
And what is target all about?

[grizzm0]

Target runs different webpack configs. Production does minification, optimization, hashing etc that development doesn't.

[bertolo1988]

I got all my questions answered. Thanks @grizzm0 and @clydin

[filipesilva]

Just wanted to add that you can find some more info in https://github.com/angular/angular-cli/wiki/build.

Cheers to @clydin and @grizzm0 !

[bertolo1988]

@filipesilva that has everything i needed. Cheers!

[KhaledElAnsari]

how to did you solve your issue?

[simeyla]

If you're looking in Chrome at your files it can appear they are not minified even though they in fact are. This can be due to enabling the pretty print feature.

This tripped me up with ng serve which in fact does minify when using --prod but I thought it hadn't. If this is happening to you then turn off the pretty print, or open the file in a blank tab to view it directly.

[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._}