Repository navigation
ng build --prod does NOT minify / uglify / remove comments using angular-cli 6 beta #9973
Description
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"intsconfig.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.
Activity
IgorMinar commentedon Mar 16, 2018
I see this problem as well.
--prodseems to result in a dev build.temporary workaround:
ng build --target production --environment productionfilipesilva commentedon Mar 16, 2018
--prodindeed 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=productioninstead. It should do everything that--prodwas doing, since--prodwas just shorthand for--target=production. There is no need to also set the environment separately.benneq commentedon Mar 16, 2018
@filipesilva : According to https://github.com/angular/angular-cli/wiki/build
Though I guess, we must also add
--environment=prodin order to get full--prodmode.I now tested with
ng serve ---target=production --environment=prod --host=0.0.0.0. And I get an error when usinges2015(es5works, andng serve --aot --host=0.0.0.0works, 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. Andnis defined asconst 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#L147And here:
n = n: https://github.com/angular/angular/blob/c8a1a14b87e5907458e8e87021e47f9796cb3257/packages/common/http/src/xhr.ts#L25Could also be due to function inlining, but I'm not sure who's responsible for this.
benneq commentedon Mar 16, 2018
I've created a new issue for the encountered error: #9989
toni-rmc commentedon May 24, 2018
@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 commentedon May 28, 2018
@IgorMinar I am getting following error when I ran the
ng build --target production --environment productiontaskfilipesilva commentedon May 28, 2018
@toni-rmc @samithaf the
--targetand--environmentoptions are not present in Angular CLI 6 final.You should be able to do
ng build --prodand get a production build. If you have a another configuration you want to use instead, useng build --configuration=configuration-name.toni-rmc commentedon May 31, 2018
@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 commentedon Jun 2, 2018
It definitely works (as of latest bits) - but if you have
pretty printenabled 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
:formattedthen open thejsfile 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 --prodfor this example.toni-rmc commentedon Jun 2, 2018
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 commentedon Jun 7, 2018
Same issue here, index.html is not minified. For now I minified it manualy
benoitmugnier commentedon Jun 13, 2018
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 commentedon Jul 3, 2018
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 commentedon Jul 3, 2018
Ok, so I have fixed the issue referencing the environment in the "src/environments/environment" not that one in the "src/app/environment".
benoitmugnier commentedon Jul 3, 2018
Thanks a lot Radoslav!!! May I ask you to keep us posted when the fix will be released? Thanks again!
rvmladenov commentedon Jul 3, 2018
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 commentedon Aug 20, 2018
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 commentedon Sep 8, 2019
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.