Angular-cli: Proposal: More intelligent transpilation for Differential Loading

[lacolaco]

🚀 Feature request

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

This proposal is inspired by the Chrome team's work on babel/preset-modules.

Currently, Angular CLI's mechanism for differential loading is simple; creating original bundles targetted in ES2015 and down-leveling it for ES5 compatible.

But today, _modules-compatible_ browsers can accept more modern JavaScript than es2015 like async/await, Object Spread, Tagged Template, and more. So the Chrome team created a babel preset for getting more compact modern JavaScript.

Please see more https://github.com/babel/preset-modules#how-does-it-work.

I guess that idea can help also Angular CLI's build process. Generate original bundles for browsers that support ES Modules, and down-leveling it for legacy browsers.

I'm not sure how we can achieve it with TypeScript-based toolchain, but I hope it isn't impossible.

[clydin]

That is really a replacement for TypeScript's down-leveling (ESnext to ES2015) rather than a replacement or refinement of the differential loading down-leveling (ES2015 to ES5). There are also concerns here with some of the ECMA features. For instance, native async/await cannot be used with Zone.js so must always be down-leveled and as a result, a variety of plugins present within preset-env would then need to be also included. Some initial work on usage-based polyfilling via preset-env has also been prototyped. So the ideal scenario would be for this new preset to be incorporated within preset-env's esmodules option and from reading the documentation, this does appear to be the plan.

[lacolaco]

Just an idea for build process:

1. Type-checking with TypeScript (no emitimg)
2. Compiling source to modern JS with babel (typescript plugin)
3. Down-leveling bundles to ES5 with TypeScript (or babel?)

[clydin]

The AOT compiler necessitates TypeScript compilation.
The usage based polyfills prototype approach was for TS to target ESnext then use babel with preset-env as a post processor within the bundler to generate the module script variants. However, the aforementioned preset is brand new and the babel configuration to ensure a functioning Angular application would be more complex than just adding this preset. But this is definitely something to monitor and consider long-term.

[JounQin]

https://www.npmjs.com/package/@alauda/custom-webpack

See our workaround here.

We pipe @ngtools/webpack then babel-loader, and targeting esnext for TypeScript. Works perfectly in our internal projects.

[PapaNappa]

Is this currently being worked on?
This seems to be a major issue for Angular moving forward, as the zone.js issue with native async/await prevents developers from adopting anything newer then ES2015 (https://github.com/angular/angular/issues/31730) and also prevents other crucial libraries like rxjs from adopting newer targets (https://github.com/angular/angular/issues/38782).

Down-leveling _only_ async/await seems to be the only working solution until other fixes are found - and seems a reasonable step towards supporting newer targets completely; reducing the current pain of developers running into this issue.

https://github.com/angular/angular-cli/issues/16996 has been opened as a request to support this solution, but has been closed in favour of this issue. So are there any plans moving forward?