Differential loading: Edge not considered ES2015 browser

[acalvo]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Kind of, due to the introduction of differential loading.

Description

Edge 15-18 are considered non-ES2015 browsers when compiling the app. If you target only Edge 18 in browserslist, I'd expect to only generate the ES2015 code (similar to what happens when only targeting the latest Firefox/Chrome release); but ES5 code is also generated. This is specially worrying because, due to a Edge bug, when running the app, the ES5 bundle is downloaded (but not executed), and the ES2015 bundle is downloaded twice (reference philipwalton/webpack-esnext-boilerplate#1 (comment) ).

The result is that, while in Angular 7 I already compiled for ES2015 giving Edge users a optimized bundle, in Angular8 they are going to download more than 3 times the previous size to end up running the same ES2015 bundle.

🔬 Minimal Reproduction

Edit browserslist file with only this content:

Edge 18

And run ng build --prod

🔥 Exception or Error

Both ES5 and ES2015 are generated.

🌍 Your Environment

Angular CLI: 8.0.0
Node: 12.2.0
OS: darwin x64
Angular: 8.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              8.0.0
@angular-devkit/schematics        8.0.0
@angular/flex-layout              8.0.0-beta.26
@angular/pwa                      0.800.0
@ngtools/webpack                  8.0.0
@schematics/angular               8.0.0
@schematics/update                0.800.0
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

[alan-agius4]

Hi, I just had a quick look at this, and it seems to be caused by an upstream package.

import * as caniuse from 'caniuse-api';
caniuse.isSupported('es6-module', 'Edge 18')  -> false 

I will try to determine in which upstream direct or transitive dependency the problem is to report the problem in the appropriate tracker.

[acalvo]

Thanks a lot for looking into this! :)

Yes, I got there because once detected in Angular I was curious how Angular was deciding if it was either a ES5 or ES2015 browser, and saw the caniuse.isSupported bit. I reported it in there: MoOx/caniuse-api#82 . Truth is I didn't dig any further; didn't occur to me that the problem might come from another dependency of it...