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 .hooks instead

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 #9707 as part of a command runner update.

We're still missing the followup PR #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.