Build Optimizer does not support es2015 code

[filipesilva]

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

Related to #237

[robwormald]

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

[hansl]

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.

[cyrilletuzi]

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.

[rafaelfgx]

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.

[robwormald]

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

[msklvsk]

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

(angular.io/guide/typescript-configuration)

[devoto13]

@hansl It does not seem to be the case.

Here is ES2015 with build optimizer on (fails with angular/angular-cli#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).

[catull]

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

See angular/angular-cli#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.

[hijamoya]

I got same issues here.

[byrondover]

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.

[robwormald]

@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)

[StephenFluin]

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

[byrondover]

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

Thanks for the clarification, gents! 🙇

[zijianhuang]

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?

[TomDemulierChevret]

@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 ?

[filipesilva]

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

[filipesilva]

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;
})();

[clydin]

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.

[zijianhuang]

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

[filipesilva]

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

[Maximaximum]

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

[cedvdb]

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.

[filipesilva]

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

[cedvdb]

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

[filipesilva]

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.

[shahafal]

@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

[alexeagle]

This issue was moved to angular/angular-cli#12112