Build Optimizer does not support es2015 code #12112

alexeagle · 2018-09-04T23:16:40Z

From @filipesilva on April 30, 2018 17:28

Build Optimizer does not currently support es2015 ~~modules~~ code, but we should support it.

Related to angular/devkit#237

Copied from original issue: angular/devkit#816

alexeagle · 2018-09-04T23:16:41Z

From @robwormald on May 4, 2018 18:43

Should also support ES2015 code (really, it should support esnext)

alexeagle · 2018-09-04T23:16:41Z

From @hansl on May 5, 2018 19:5

I was under the impression UglifyES (or whatever NG version of uglify) was doing a proper job at DCE on ES2015 code and that we wouldn't need build optimizer for those.

alexeagle · 2018-09-04T23:16:42Z

From @cyrilletuzi on May 8, 2018 9:43

Note: now we have Angular Elements, support for ES2015 becomes more important, because transpiling custom elements to ES5 is not supported by the standard and produces an error.

alexeagle · 2018-09-04T23:16:42Z

From @rafaelfgx on May 10, 2018 23:59

With all the respect, this is a very basic bug and one that should be avoided.

You create an Angular 6 application, without changing anything, with all the default settings, build it for production, and it does not work.

It is very serious that something so trivial as publishing in production is not working in the final version.

More testing is needed, especially for the most important and essential tasks.

alexeagle · 2018-09-04T23:16:43Z

From @robwormald on May 11, 2018 0:34

@rafaelfgx - nobody should be using es2015 modules in production, Webpack doesn’t export them, and they’re not turned on by default.

alexeagle · 2018-09-04T23:16:43Z

From @msklvsk on May 11, 2018 9:22

While buildOptimizer is turned on by default, es6 is not, including the docs:

(angular.io/guide/typescript-configuration)

alexeagle · 2018-09-04T23:16:44Z

From @devoto13 on May 14, 2018 12:24

@hansl It does not seem to be the case.

Here is ES2015 with build optimizer on (fails with #10658):

Here is ES2015 with build optimizer off:

As you can see it is ~200k less with build optimizer enabled. Not sure if it is real gain or a side effect of build optimizer removing not dead code, but this looks like a lot of gain. Most of it comes from Angular packages (~180k).

alexeagle · 2018-09-04T23:16:45Z

From @catull on May 16, 2018 12:43

Hmm, I see a build optimiser bug for production builds with ES5.

See #7799 (comment).
That issue is closed, stating that the bug is tracked here.

As a work-around, I switched off build-optimiser and the app is working.
With build-optimiser ON, the error is as documented in the "issue comment" at the top of this comment.

alexeagle · 2018-09-04T23:16:46Z

From @hijamoya on May 17, 2018 10:17

I got same issues here.

alexeagle · 2018-09-04T23:16:47Z

From @byrondover on May 27, 2018 20:27

robwormald commented 10 days ago

@rafaelfgx - nobody should be using es2015 modules in production, Webpack doesn’t export them, and they’re not turned on by default.

@robwormald You may want to align with @StephenFluin on your community messaging around enabling ES2015. 😅

https://twitter.com/stephenfluin/status/997224523610116096

P.S. Big fans of all the work you do and are doing! 🤞for production ES2015 support by 2020.

alexeagle · 2018-09-04T23:16:48Z

From @robwormald on May 27, 2018 20:51

@byrondover ES2015 syntax (classes, const,let,etc) is fine (assuming your browser target supports it) - lots of good wins to be had there.

ES2015 modules, not so much (though if you a very adventurous, no harm trying)

alexeagle · 2018-09-04T23:16:49Z

From @StephenFluin on May 27, 2018 21:25

My talk was about how Angular is working to push the limits of the web, and that if/when it made sense to ship all apps as ES2015 we could do that for you and save a bunch of bundle size and increase perf. Hello World worked for me but in general shipping ES2015 actually can hurt your machine readability as things like the Google crawler don't support ES2015

alexeagle · 2018-09-04T23:16:49Z

From @byrondover on May 27, 2018 21:59

Wow, didn't expect a response, let alone over Memorial Day weekend. 🇺🇸

Thanks for the clarification, gents! 🙇

alexeagle · 2018-09-04T23:16:50Z

From @zijianhuang on May 28, 2018 5:29

Having this problem since NG 6.0. Still a problem in 6.0.3 along with the latest CLI. As said by this others, setting "buildOptimizer":false will make things in production work again, however, the bundle is apparently too big. Let's see if 6.0.4 will has this fixed?

alexeagle · 2018-09-04T23:16:50Z

From @TomDemulierChevret on May 28, 2018 7:32

@StephenFluin Having our webapp crawlable is not mandatory for many of us. In my company 90% of Angular apps we develop are not publicly available.

@robwormald Is it possible to build with only ES2015 syntax ?

alexeagle · 2018-09-04T23:16:51Z

From @filipesilva on May 29, 2018 13:8

angular/devkit#981 has some fixes for ES2015 code support.

Thinking more about it, I don't think we do anything in regards to ES2015 modules in Build Optimizer, so that is probably enough.

alexeagle · 2018-09-04T23:16:51Z

From @filipesilva on May 30, 2018 9:47

Building upon #981, we should also wrap static initializers on ES2015 classes.

This is similar to https://github.com/angular/devkit/blob/master/packages/angular_devkit/build_optimizer/README.md#wrap-enums.

The following TS class:

class MyClass {
  static field = console.log('hello');
}

transpiled to es2015 is:

"use strict";
class MyClass {
}
MyClass.field = console.log('hello');
//# sourceMappingURL=static.js.map

and ran through build optimizer yields:

"use strict";
class MyClass {
}
MyClass.field = /*@__PURE__*/ console.log('hello');

MyClass can never be dropped because of the property access. If we wrap it it should be ok though:

var MyClass = (function () {
  class MyClass {
  }
  MyClass.field = console.log('hello');
  return MyClass;
})();

alexeagle · 2018-09-04T23:16:52Z

From @clydin on May 30, 2018 14:6

Two potential downsides to this approach would be increased code size and a potential decrease in runtime performance. Both of these should be analyzed to ensure the additional behavior is a net positive.

alexeagle · 2018-09-04T23:16:52Z

From @zijianhuang on May 31, 2018 3:55

As of Angular CLI 6.0.7, the problem is still there.

alexeagle · 2018-09-04T23:16:53Z

From @filipesilva on May 31, 2018 7:39

@zijianhuang the changes are not in 6.0.7. I think you can test these changes by installing @angular-devkit/[email protected].

alexeagle · 2018-09-04T23:16:53Z

From @Maximaximum on May 31, 2018 7:45

I updated @Angular-devkit to 0.6.7 and the issue seems to be gone.

alexeagle · 2018-09-04T23:16:54Z

From @cedvdb on June 5, 2018 10:12

issue still here with 0.7.0 and target es6.

What would be really nice is an error at compilation time as to maybe find a temporary fix for the part of the code that's problematic.

alexeagle · 2018-09-04T23:16:55Z

From @filipesilva on June 5, 2018 12:58

@cedvdb can you put up a repro I can look at please?

alexeagle · 2018-09-04T23:16:55Z

From @cedvdb on June 6, 2018 12:46

@filipesilva

The problem seems to be resolved. I didn't manage to reproduce it yet. If you need so I could dig deeper this evening, right now I gotta work.

alexeagle · 2018-09-04T23:16:55Z

From @filipesilva on June 6, 2018 12:51

As long as it's working, I think there's no need to look further. If I had to bet it wasn't working because at some point you were in an old version.

This fix is only on @angular-devkit/[email protected] that comes with @angular-devkit/[email protected].

You can check what version you have with npm list @angular-devkit/build-optimizer.

alexeagle · 2018-09-04T23:16:56Z

From @shahafal on June 6, 2018 13:40

@StephenFluin ... things like the Google crawler don't support ES2015

thank you for this, it's the first time i'm hearing of it. unfortunately except for discussions about this being an issue i can't find anywhere a discussion about the status to fix this.
do you know if there is an open thread in github (or someplace else) discussing the fix? i would like to follow it

filipesilva · 2019-01-21T12:30:20Z

Build Optimizer should now not break ES2015 code.

It still doesn't have certain desirable features such as #13487 or #13488, but those are being tracked in their respective issues.

VVKot · 2019-02-12T12:29:03Z

@filipesilva Greetings! Does "now" mean angular-cli 8+?

filipesilva · 2019-02-12T12:46:48Z

@VVKot it should be in 7.3 too, the latest fixes we had were released in https://github.com/angular/angular-cli/releases/tag/v7.3.0-rc.0.

ryshep111 · 2019-05-06T22:35:02Z

The issue is still present for me on version 7.3.7

filipesilva · 2019-05-07T07:45:43Z

@ryshep111 can you open a new issue including a reproduction? I'm don't really know what you're seeing or how to investigate it.

zijianhuang · 2019-05-07T09:21:31Z

@ryshep111, the issue was fixed somewhere after v6.0.3, at the moment I am using v7.2.12.
my tsconfig.json:

{
	"compileOnSave": false,
	"compilerOptions": {
		"baseUrl": "./",
		"outDir": "./dist/out-tsc",
		"sourceMap": true,
		"declaration": false,
		"moduleResolution": "node",
		"emitDecoratorMetadata": true,
		"experimentalDecorators": true,
		"target": "es2015",
		"typeRoots": [
			"node_modules/@types"
		],
		"lib": [
			"es2017",
			"dom"
		],
		"skipLibCheck": true
	}
}

My angular.json

...
					"configurations": {
						"production": {
							"optimization": true,
							"outputHashing": "all",
							"sourceMap": false,
							"extractCss": true,
							"namedChunks": false,
							"aot": true,
							"extractLicenses": true,
							"vendorChunk": false,
							"buildOptimizer": true,
							"fileReplacements": [
								{
									"replace": "src/environments/environment.ts",
									"with": "src/environments/environment.prod.ts"
								}
							],
							"serviceWorker": true
						}
					}
...

Hope this gives you some hint.

shlomiassaf · 2019-05-26T17:45:56Z

@alan-agius4 @filipesilva

OK, it took me 4 hours but I think I found the root cause, or at least the way to reproduce exactly.

I've created a repository to reproduce it, all explanations are in the readme file there.

https://github.com/shlomiassaf/angular-cli-build-optimizer-es2015-issue

Ohh boy, this one was tricky.

TLDR: It will only happen if the class is built in FESM2015 module AND it has a NON-ANGULAR decorator applied on it.

I.E: Angular packages built with ng-packger.

waterplea · 2019-07-12T08:58:29Z

@shlomiassaf it reproduces for me too. In our library we have our own decorators so it's probably the same root cause — all our super calls are dropped with build optimizer and es2015 target. Works fine in Angular 8 though. @filipesilva any chance this could be fixed in Angular 7 by investigating the above reproduction repo? Could we at least somehow mark super calls so compiler does not cut them out? This looks like the only problem we are having.

filipesilva · 2019-07-12T14:25:04Z

@waterplea I think it got fixed in #14263. In general we don't do releases of n-1 versions unless it's a security concern though. Is there something stopping you for updating to version 8?

waterplea · 2019-07-12T15:06:14Z

@filipesilva I'm developing a library which theoretically works in Angular 6+, it's just unfortunate that if users would want to run my library in es2015 they are forced to update. So yeah, I understand you not touching older versions, I was maybe hoping for some ninja tactics like // @dynamic or whatever :)

maxim1006 · 2019-09-02T14:40:03Z

@VVKot it should be in 7.3 too, the latest fixes we had were released in https://github.com/angular/angular-cli/releases/tag/v7.3.0-rc.0.

No it is not working in 7.3

maxim1006 · 2019-09-02T14:44:53Z

#14263

Hello

Why this issue is closed?

In any v7 version, with ng library, you can reproduce this issue.

In my company we cant update to v8 instantly.

Stevearzh · 2019-09-27T04:05:35Z

Well, is there something I can do to solve this on v6.2.9? We can't update (trying) to v8 like upstairs.

angular-automatic-lock-bot · 2019-10-28T08:03:26Z

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

alexeagle added the priority2: required label Sep 4, 2018

alexeagle mentioned this issue Sep 4, 2018

Build Optimizer does not support es2015 code angular/devkit#816

Closed

filipesilva added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed priority2: required labels Sep 7, 2018

filipesilva closed this as completed Jan 21, 2019

LanderBeeuwsaert mentioned this issue Feb 13, 2019

Run fails with es2015 #13670

Closed

maplion mentioned this issue May 13, 2019

Build Optimizer [es2015] "ReferenceError: Must call super constructor" issue with lazy-loaded modules #14416

Closed

shlomiassaf mentioned this issue May 26, 2019

Missing fields on table when targeting ES2015 or higher shlomiassaf/ngrid#8

Closed

kevinramharak mentioned this issue Jun 27, 2019

error -- assignment to const tunnelvisionlabs/antlr4ts#416

Open

kingfolk mentioned this issue Jun 28, 2019

ng serve --prod with buildOptimizer turn on reports "Uncaught TypeError: Assignment to constant variable." #14930

Closed

benjamincharity mentioned this issue Jul 17, 2019

Angular 8 amcharts 4, example chart does not appear, but watermark does amcharts/amcharts4#1424

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 28, 2019

Build Optimizer does not support es2015 code #12112

Build Optimizer does not support es2015 code #12112

Comments

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

alexeagle commented Sep 4, 2018

filipesilva commented Jan 21, 2019

VVKot commented Feb 12, 2019

filipesilva commented Feb 12, 2019

ryshep111 commented May 6, 2019

filipesilva commented May 7, 2019

zijianhuang commented May 7, 2019

shlomiassaf commented May 26, 2019

waterplea commented Jul 12, 2019 • edited Loading

filipesilva commented Jul 12, 2019

waterplea commented Jul 12, 2019

maxim1006 commented Sep 2, 2019

maxim1006 commented Sep 2, 2019

Stevearzh commented Sep 27, 2019

angular-automatic-lock-bot bot commented Oct 28, 2019

waterplea commented Jul 12, 2019 •

edited

Loading