Angular-cli: ng build --prod does NOT minify / uglify / remove comments using angular-cli 6 beta

[benneq]

Versions

Angular CLI: 6.0.0-beta.5
Node: 9.7.1
OS: darwin x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 6.0.0-beta.5
@angular-devkit/build-optimizer: 0.4.5
@angular-devkit/core: 0.4.5
@angular-devkit/schematics: 0.4.5
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 6.0.0-beta.5
@schematics/angular: 0.4.5
@schematics/package-update: 0.4.5
typescript: 2.5.3
webpack: 4.0.1

Repro steps

• npm install -g @angular/cli@next
• ng new project
• cd project
• ng build --prod (or npm run build)

Also tested:

• npm install -g @angular/cli@next
• ng new project
• cd project
• ng update --next
• ng build --prod (or npm run build)

And optional:

• change "target" from "es5" to "es2015" in tsconfig.json

Observed behavior

$ ng build --prod
 10% building modules 3/3 modules 0 active(node:62415) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
Date: 2018-03-15T10:28:55.547Z                                                            
Hash: 3474e7c683382f9506ba
Time: 4039ms
chunk {main} main.js, main.js.map (main) 9.48 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 224 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.5 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.71 MB [initial] [rendered]

The resulting file sizes vary a little bit, depending on the used settings (angular 5, angular 6 beta, es5 or es2015).

Desired behavior

Much smaller bundle sizes.

Mention any other details that might be useful (optional)

When looking at the generated .js files, I can see lot's of whitespaces, comments, etc. pp. Though I guess that uglify is not running.

There's no error in the output. The only warning in the output (you can see above) is DeprecationWarning: Tapable.plugin is deprecated. Use new API on.hooksinstead

The same results could be observed when using @angular/cli: 6.0.0-beta.4.

[IgorMinar]

I see this problem as well. --prod seems to result in a dev build.

temporary workaround: ng build --target production --environment production

[filipesilva]

--prod indeed does nothing in beta.5. That regression was temporarily introduced in https://github.com/angular/angular-cli/pull/9707 as part of a command runner update.

We're still missing the followup PR https://github.com/angular/angular-cli/pull/9883 that moves the finishes moving the build system and re-enabled --prod.

The workaround for now is to use --target=production instead. It should do everything that --prod was doing, since --prod was just shorthand for --target=production. There is no need to also set the environment separately.

[benneq]

@filipesilva : According to https://github.com/angular/angular-cli/wiki/build

# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

Though I guess, we must also add --environment=prod in order to get full --prod mode.

---

I now tested with ng serve ---target=production --environment=prod --host=0.0.0.0. And I get an error when using es2015 (es5 works, and ng serve --aot --host=0.0.0.0 works, too).

Chrome says: TypeError: Assignment to constant variable.
In this line: o = ("responseURL"in (n = n) && n.responseURL ? n.responseURL : /^X-Request-URL:/m.test(n.getAllResponseHeaders()) ? n.getResponseHeader("X-Request-URL") : null) || t.url;

The problem is (n = n), because that's the only assignment. And n is defined as const n = this.xhrFactory.build();.

I'm not sure if this problem is part of angular itself, or the TypeScript Compiler, or Uglify, or angular-cli because of bad uglify options.

The line in the angular source code is here:
o = ... = url = ...: https://github.com/angular/angular/blob/c8a1a14b87e5907458e8e87021e47f9796cb3257/packages/common/http/src/xhr.ts#L147
And here: n = n: https://github.com/angular/angular/blob/c8a1a14b87e5907458e8e87021e47f9796cb3257/packages/common/http/src/xhr.ts#L25

Could also be due to function inlining, but I'm not sure who's responsible for this.

[benneq]

I've created a new issue for the encountered error: #9989

[toni-rmc]

@filipesilva
It doesn't work.
Error I'm getting is:

Project 'production' could not be found in workspace. Error: Project 'production' could not be found in workspace. at Workspace.getProject (C:\Apache24\htdocs\ng-app\node_modules\@angular-devkit\core\src\workspace\workspace.js:83:19) at Architect.getBuilderConfiguration (C:\Apache24\htdocs\ng-app\node_modules\@angular-devkit\architect\src\architect.js:96:41) at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (C:\Apache24\htdocs\ng-app\node_modules\@angular\cli\models\architect-command.js:77:55) at MergeMapSubscriber._tryNext (C:\Apache24\htdocs\ng-app\node_modules\rxjs\internal\operators\mergeMap.js:122:27) at MergeMapSubscriber._next (C:\Apache24\htdocs\ng-app\node_modules\rxjs\internal\operators\mergeMap.js:112:18) at MergeMapSubscriber.Subscriber.next (C:\Apache24\htdocs\ng-app\node_modules\rxjs\internal\Subscriber.js:103:18) at TapSubscriber._next (C:\Apache24\htdocs\ng-app\node_modules\rxjs\internal\operators\tap.js:109:26) at TapSubscriber.Subscriber.next (C:\Apache24\htdocs\ng-app\node_modules\rxjs\internal\Subscriber.js:103:18) at MergeMapSubscriber.notifyNext (C:\Apache24\htdocs\ng-app\node_modules\rxjs\internal\operators\mergeMap.js:141:26) at InnerSubscriber._next (C:\Apache24\htdocs\ng-app\node_modules\rxjs\internal\InnerSubscriber.js:30:21)

[samithaf]

@IgorMinar I am getting following error when I ran the ng build --target production --environment production task

Angular CLI: 6.0.5
Node: 8.9.3
OS: darwin x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.5
@angular-devkit/build-angular     0.6.5
@angular-devkit/build-optimizer   0.6.5
@angular-devkit/core              0.6.5
@angular-devkit/schematics        0.6.5
@angular/cdk                      6.1.0
@angular/cli                      6.0.5
@angular/material                 6.1.0
@ngtools/webpack                  6.0.5
@schematics/angular               0.6.5
@schematics/update                0.6.5
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

Cannot determine project or target for Architect command.
Error: Cannot determine project or target for Architect command.
    at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (/<PATH>/node_modules/@angular/cli/models/architect-command.js:62:27)

[filipesilva]

@toni-rmc @samithaf the --target and --environment options are not present in Angular CLI 6 final.

You should be able to do ng build --prod and get a production build. If you have a another configuration you want to use instead, use ng build --configuration=configuration-name.

[toni-rmc]

@filipesilva I have tested and yes bundled files are indeed minified and comments removed, although index.html is not, it stays the same in production build.

[simeyla]

It definitely works (as of latest bits) - but if you have pretty print enabled in Chrome it can look as though it isn't.

The clue is here in the tab above the javascript code panel:

If you're seeing :formatted then open the js file in a new window to verify it is indeed minified and disable the pretty print feature if you wish.

I'm simply running ng serve --prod for this example.

[toni-rmc]

I'm viewing the index.html in Sublime not trough Chrome. And it is not minified when using production build, at least in my case.

[roalmeida]

Same issue here, index.html is not minified. For now I minified it manualy

[benoitmugnier]

Hello, on my side, the index.html is not minified and I can't explain why but the code is not compiled with the good target defined (es5) in tsconfig.json and then the code is not compatible with IE11. (because of arrow functions in the main JS file)

[rvmladenov]

I am still experiencing issues related to the --prod mode(ng build --prod --base-href=/). When running "ng build --prod" it works but "environment.production" is false.

Running "ng build --target=production --prod --base-href=/" leads to:

Cannot determine project or target for Architect command.
Error: Cannot determine project or target for Architect command.
at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\@angular\cli\models\architect-command.js:62:27)
at MergeMapSubscriber._tryNext (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\rxjs\internal\operators\mergeMap.js:122:27)
at MergeMapSubscriber._next (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\rxjs\internal\operators\mergeMap.js:112:18)
at MergeMapSubscriber.Subscriber.next (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\rxjs\internal\Subscriber.js:103:18)
at TapSubscriber._next (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\rxjs\internal\operators\tap.js:109:26)
at TapSubscriber.Subscriber.next (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\rxjs\internal\Subscriber.js:103:18)
at MergeMapSubscriber.notifyNext (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\rxjs\internal\operators\mergeMap.js:141:26)
at InnerSubscriber._next (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\rxjs\internal\InnerSubscriber.js:30:21)
at InnerSubscriber.Subscriber.next (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\rxjs\internal\Subscriber.js:103:18)
at MapSubscriber._next (D:\github\ui-data-tools\DamageDescriptionTool\node_modules\rxjs\internal\operators\map.js:92:26)

The @angular/cli that I am using now is "version": "6.0.5"

[rvmladenov]

Ok, so I have fixed the issue referencing the environment in the "src/environments/environment" not that one in the "src/app/environment".

[benoitmugnier]

Thanks a lot Radoslav!!! May I ask you to keep us posted when the fix will be released? Thanks again!

[rvmladenov]

Well it seems that the "app/environment.ts" is a left over from the updated to angular 6 project. If you create a brand new app using "ng new " - that file is no longer there.

[FrancescoBorzi]

I had the same issue after upgrading to Angular CLI 6.x, my solution to the issue was:

https://stackoverflow.com/questions/51926816/ng-build-prod-does-not-minify-uglify-remove-comments-since-angular-cli-6/51926817

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