Angular-cli: Angular CLI can't run minify process on CKEditor (ES6 code)

[mswilson4040]

Bug Report or Feature Request (mark with an x)

- [ X] bug report -> please search issues before submitting
- [ ] feature request

Versions.

1.4.1

Repro steps.

1.) git clone https://github.com/mswilson4040/ckangular.git
2.) npm install
3.) ng build --prod --aot

The log given by the failure.

Desired functionality.

Either an option to transpile es6 down to es5 or some option to access webpack (without ng eject). It would be really nice if angular-cli would sniff out any es6 and automatically transpile it down to es5 or leverage a different plugin that supports es6.

Mention any other details that might be useful.

CKEditor5 is in developer preview right now and has an upcoming alpha release. The big thing about CKEditor5 is it works with webpack as opposed to CKEditor 4 and below. However, CKEditor is written in ES6 so when we run a production build with the angular cli, UglifyJs throws in error on the vendor.bundle. I have an open ticket with CKEditor as well but it looks like the root cause is angular cli uses webpack UglifyJs plugin which doesn't support ES6 code. The problem eventually bubbles up pointing fingers at angular cli and the lack of access to modify the webpack config.

https://ckeditor5.github.io/

https://github.com/ckeditor/ckeditor5/issues/560

[Reinmar]

Hi! I'm one of CKEditor 5's developers. This issue was brought to us by @mswilson4040 and, I have to say, it was a pretty big surprise. We've recently dropped compat (ES5) builds because we assumed that one either ships for browsers which support ES6 (all browsers which CKE5 supports at the moment have sufficient ES6 support to run it) or they can easily enable ES6 to ES5 transpilation. Not being able to load ES6 library using Angular CLI came as a surprise.

We'll reconsider bringing back ES5 builds (https://github.com/ckeditor/ckeditor5-build-classic/issues/24), but using them will have one significant downside – they are bigger (in terms of code size) than what many Angular apps might need to ship.

• If one needs to ship for ES6 compatible environments, they could use https://github.com/babel/minify. Minifying ES6 gives nearly 2x smaller builds than minifying ES6 transpiled to ES5 (in our case – 418kb vs 748kb before gzipping). If Angular CLI allowed using different minifier, it might reduce code size significantly.
• If one needs to ship to a certain set of browsers (which don't yet fully support ES6), then they could use babel-preset-env to configure which parts of ES6+ need to be transpiled to ES5. This would need to be used with ES6+ capable minifier, but it will give best possible results while still supporting all required browser versions.
• Finally, I didn't check that, but I think that passing all libs through Babel at once will give better results than transpiling each separately (which is the case if you're using ES5 versions of libraries).

I saw a couple of issues about Angular CLI and ES6 output, but none about including ES6 libraries. Was this topic already discussed?

[filipesilva]

Heya, we actually added ES2015 support very recently (https://github.com/angular/angular-cli/pull/7610), and you can use it with @angular/[email protected] and changing your tsconfig to use "target": "es2015". I tried with your repo and the uglify error went away (beware of https://github.com/angular/angular-cli/issues/7797 though, am trying to fix this still).

We don't, however, have support for automatically transpiling ES6 code to ES5. This means that if you are using es2015 support, you are shipping es2015 code.

There's been some talk about doing this sort of thing, and for using babel-preset-env for dynamic detection, but I can't say it's going to happen soon. Commiting to transpiling vendors needs a fair bit of consideration about how it affects build speeds, stuff that might break, feature support on the transpilers, etc.

We assume that libraries are shipping ES5 (possibly with es6 modules) in the browser/module/main entry of package.json, and es2015 in the es2015 entry (pretty much as described in http://2ality.com/2017/04/setting-up-multi-platform-packages.html).

I agree that there are many benefits to using es2015, but packaging es2015 in main necessarily means you are not supporting some consumers. This is a topic we've given a lot of though over at Angular (see https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx). I'm not saying CKEditor should adopt a similar approach but I am saying that our position is not arbitrary: we try to support several types of consumers.

[Reinmar]

Thanks! That's great news :)

I see that we need to research this a bit more on our side. Right now, I'd prefer if we shipped ES6 by default. Or in other words – shipping two formats will make sense only if popular bundlers would pick ES6 if they support it. I'm going to check how they handle the main and es2015 fields cause I know that this was dynamically changing recently. It's also still unclear for me whether these fields are more about the module format or the entire syntax. Anyway, thanks for the links.

[mswilson4040]

I've confirmed this works on my end. I think this can be closed.

[filipesilva]

Closing as per @mswilson4040's comment.

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