Differential loading of polyfills does not work as expected

[manfredsteyer]

🐞 Bug report

Command (mark with an x)

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

Description

According to the design docs, we should get es5 polyfills if the target in tsconfig.json is es5 and browserslist points to es5 browsers. Currently, this does not seem to be the case.

🔬 Minimal Reproduction

1. Use this browserslist:

> 0.5%

last 2 versions
Firefox ESR
not dead
IE 9-11

2. In tsconfig.json, set target to es5

3. ng build --prod

4. You will get those polyfills file:

chunk {2} polyfills.def630dd003427531b93.js (polyfills) 42.7 kB [initial] [rendered]

5. Update your browserslist so that it just contains last 1 chrome version

6. ng build --prod

7. You get the same polyfills file:

chunk {2} polyfills.def630dd003427531b93.js (polyfills) 42.7 kB [initial] [rendered]

🔥 Exception or Error

We should get a bigger polyfills file with corejs etc. in there first case where IE 9-11 is part of the browserslist.

🌍 Your Environment

• Windows 10
• Project was migrated to Angular 8-beta and CLI 8-beta

"dependencies": {
    "@angular/animations": "8.0.0-beta.12",
    "@angular/common": "8.0.0-beta.12",
    "@angular/compiler": "8.0.0-beta.12",
    "@angular/core": "8.0.0-beta.12",
    "@angular/elements": "8.0.0-beta.12",
    "@angular/forms": "8.0.0-beta.12",
    "@angular/http": "8.0.0-beta.10",
    "@angular/platform-browser": "8.0.0-beta.12",
    "@angular/platform-browser-dynamic": "8.0.0-beta.12",
    "@angular/pwa": "^0.800.0-beta.14",
    "@angular/router": "8.0.0-beta.12",
    "@angular/service-worker": "8.0.0-beta.12",
    "@ngrx/effects": "^7.2.0",
    "@ngrx/entity": "^7.2.0",
    "@ngrx/router-store": "^7.2.0",
    "@ngrx/store": "^7.2.0",
    "@ngrx/store-devtools": "^7.2.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@swimlane/ngx-charts": "^10.0.0",
    "@webcomponents/custom-elements": "^1.2.2",
    "@webcomponents/webcomponentsjs": "^2.2.4",
    "angular-oauth2-oidc": "^5.0.2",
    "application": "^0.1.4",
    "bootstrap": "^4.3.1",
    "copy": "^0.3.2",
    "core-js": "^3.0.1",
    "immer": "^2.1.5",
    "ngx-build-plus": "^7.8.0",
    "rxjs": "^6.4.0",
    "rxjs-compat": "^6.4.0",
    "zone.js": "^0.9.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.800.0-beta.14",
    "@angular-devkit/build-ng-packagr": "~0.800.0-beta.14",
    "@angular/cli": "^8.0.0-beta.14",
    "@angular/compiler-cli": "8.0.0-beta.12",
    "@angular/language-service": "8.0.0-beta.12",
    "@ngrx/schematics": "^7.2.0",
    "@types/jasmine": "~3.3.12",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "~11.13.4",
    "codelyzer": "~5.0.0",
    "cpr": "^3.0.1",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ng-packagr": "^4.0.0-rc.3",
    "protractor": "~5.4.2",
    "ts-node": "~8.1.0",
    "tsickle": "0.34.3",
    "tslib": "^1.9.3",
    "tslint": "~5.9.1",
    "typescript": "^3.4.3"
  }

[clydin]

With a new project, the following output is observed:

chunk {0} runtime.741402d1d47331ce975c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.e081cac71cd7e7b8814c.js (main) 237 kB [initial] [rendered]
chunk {2} polyfills.4d596b03b53d503aaf75.js (polyfills) 42.5 kB [initial] [rendered]
chunk {3} polyfills.es5.c32bf102613373468c61.js (polyfills.es5) 68 kB [initial] [rendered]
chunk {4} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]

The ES5 polyfills appear to be included. Note that the file polyfills.es5.c32bf102613373468c61.js should most likely be using a dash to be consistent with the differential loading variant.

@manfredsteyer can you provide the output of ng version as well?

[alan-agius4]

Closing as this feature is not yet released.

Auto es5 polyfill inclusion instead of manually needing to specify esBrowserSupport for non differential builds will be available in the next beta.

[alan-agius4]

For reference this is the PR: #14166

[angular-automatic-lock-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.}