Intelligently load polyfills

[deebloo]

Feature Request

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

Versions.

future

Desired functionality.

Apologies if this already tracked somewhere I couldn't find it/
At the moment all polyfills are loaded into all browsers, it would be awesome if we could only load the polyfills that are needed by the browser the app is running in. This would help will smaller overall payload size for more modern browsers and keep legacy browsers working without having to manually manage the polyfills.ts file.

Additional information

Article for reference: https://philipwalton.com/articles/loading-polyfills-only-when-needed/

Initial thoughts

1. a script could be inlined (maybe) to load the polyfills that we know for sure angular requires
2. the initial bootstrapping would need to wait until the polyfills were loaded or even better, not loaded. (reference bottom of the referenced article)
3. polyfills.ts would still exist but would only be used to load zone.js and additional polyfills that the user wants to add.

[filipesilva]

I don't think there's another issue for this, but I remember @clydin was investigating possible ways of implementing it.

[hccampos]

How about something like https://polyfill.io/v2/docs/ ?

[filipesilva]

@hccampos that's definitely an option, but it's something that one use right now with no changes to the CLI.

A cool thing to do would be to solve this issue and #2907 at once via a .browserlist-like approach (#2907 (comment)).

[deebloo]

The only thing about using the polyfill.io website by default is that it won't work with systems without broad access to the internet. (I know that sounds weird but it's more common then you might think)

[aciccarello]

Philip Walton put out another article on a similar topic. I would be happy with his approach of one bundle for modern browsers and a legacy fallback script bundle.

Now that #2907 is resolved, is there a way to configure the CLI to do two separate builds and use the type="module" import for ES2015 and nomodule imports with a polyfill and ES5? Ideally the CLI would make the configuration simple but I'd be okay with something more complicated for now.

[firstor]

I also need this issue to be resolved.

I solved this issue myself according to Philip Walton's article and so in my workaround two different polyfills are prepared and polyfills.ts acts as a router to serve different polyfills for different browser targets :

• polyfills.ts

import * as checkBrowser from 'check-browser';
let evergreenBrowser = checkBrowser({
    chrome: 49,
    firefox: 52,
    edge: 14,
    safari: 10
});

declare var System: any;

/** Import basic polyfills required by Angular itself */
import './polyfills.basic';

/** Import optional polyfills to target browsers */
if (!evergreenBrowser) {
    System.import('./polyfills.target');
}

• polyfills.target.ts

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `yarn add classlist.js`.

/** IE10, IE11 and all Firefox browsers require the following to support `@angular/animation`. **/
/** ALREADY IMPORTED WITH POLYMER COMPONENTS */
// import 'web-animations-js';  // Run `yarn add web-animations-js`.


/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
import 'intl';  // Run `yarn add intl`.
/**
 * Need to import at least one locale-data with intl.
 */
import 'intl/locale-data/jsonp/en';

The workaround seems working perfectly, but recently I found a critical issue on IE (and plus on Edge probably), that is, my app cannot be loaded the very first time after IE cache is completely cleaned, and it can be loaded without problem after refreshing browser ~ similar with this issue: Polymer/polymer#4760

So any suggestion on this?

[hccampos]

If you do something like that, you need to delay the bootstrap until the polyfills have been loaded. On Sep 30, 2017 20:48, "first87" <[email protected]> wrote: I also need this issue to be resolved. I solved this issue myself according to Philip Walton's article <https://philipwalton.com/articles/loading-polyfills-only-when-needed/> and so in my workaround two different polyfills are prepared and polyfills.ts acts as a router to serve different polyfills for different browser targets : - polyfills.ts import * as checkBrowser from 'check-browser';let evergreenBrowser = checkBrowser({ chrome: 49, firefox: 52, edge: 14, safari: 10 }); declare var System: any; /** Import basic polyfills required by Angular itself */import './polyfills.basic'; /** Import optional polyfills to target browsers */if (!evergreenBrowser) { System.import('./polyfills.target'); } - polyfills.target.ts /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/import 'core-js/es6/symbol';import 'core-js/es6/object';import 'core-js/es6/function';import 'core-js/es6/parse-int';import 'core-js/es6/parse-float';import 'core-js/es6/number';import 'core-js/es6/math';import 'core-js/es6/string';import 'core-js/es6/date';import 'core-js/es6/array';import 'core-js/es6/regexp';import 'core-js/es6/map';import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */import 'classlist.js'; // Run `yarn add classlist.js`. /** IE10, IE11 and all Firefox browsers require the following to support `@angular/animation`. **//** ALREADY IMPORTED WITH POLYMER COMPONENTS */// import 'web-animations-js'; // Run `yarn add web-animations-js`. /*************************************************************************************************** * APPLICATION IMPORTS */ /** * Date, currency, decimal and percent pipes. * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 */import 'intl'; // Run `yarn add intl`./** * Need to import at least one locale-data with intl. */import 'intl/locale-data/jsonp/en'; The workaround seems working perfectly, but recently I found a critical issue on IE (and plus on Edge probably), that is, my app cannot be loaded the very first time after IE cache is completely cleaned, and it can be loaded without problem after refreshing browser ~ similar with this issue: Polymer/polymer#4760 <Polymer/polymer#4760> So any suggestion on this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6577 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADlcCn4igmftgMlURZ98iuRw53900aBcks5snoz2gaJpZM4Nv87Z> .

[firstor]

@hccampos Thank you for the update. But then how can I accomplish that?
For me, the best way is to import synchronously like this:

...
/** Import basic polyfills required by Angular itself */
import './polyfills.basic';

/** Import optional polyfills to target browsers */
if (!evergreenBrowser) {
    synchronously-import('./polyfills.target');
}

Is there any way to accomplish that?

[mcterrySep]

I am also interested in this feature.

[mcterrySep]

@First87 -- did you have luck with your approach from above? if so, can you share with me what you ended up with?

[aciccarello]

Here's a related issue for the nomodule approach: jantimon/html-webpack-plugin#782

[dharapvj]

See how angular.io website splits IE polyfills out..
Issue
Fix

Can something like this be implemented? It does not seem very difficult.

[mcterrySep]

@dharapvj are you asking if the angular-cli team is going to implement this? or are you recommending that app developers go around angular-cli's framework for polyfils and do this?

[dharapvj]

@mcterrySep - i am sorry I was not very clear.. i was just making suggestion that something like what is done for main angular.io site could also be implemented for generation via angular-cli.

HTH..

[tmakin]

I just tried using polyfill.io but couldn't get my app working in IE11, so have reverted to corejs. This is the url I used:
https://cdn.polyfill.io/v2/polyfill.min.js?features=es5,es6

Has anyone found a feature set for polyfill.io that works with Angular 5 and IE11?

[firstor]

@mcterrySep Since I found a problem with this approach: #6577 (comment), I adopted another approach to load polyfills intelligently - the key is to prepare multiple builds and serve the proper one of them to each target.

[filipesilva]

@cyrilletuzi also suggested (#10337) using the browserlist file to determine whether to use ES5 or ES2015 should be used.

[cyrilletuzi]

Inspiration could be taken from babel-present-env, which uses browserslist.

[CRACKISH]

What is the final solution for this problem?

[clydin]

Support for this will be available in CLI version 7.3 currently in release candidate stage. An overview of the functionality can be found in the PR description found here: #13403

[michaelz]

@clydin Will this work with other browsers that don't support ES2015, e.g. chrome 41 ?

[tomgruszowski]

Love this feature, are there any docs on how to enable this?

[mackelito]

What about ES7 polyfills?

[crysislinux]

I would like es5BrowserSupport be changed to legacyBrowserSupport and let the user define an array of polyfills to be included. es5BrowserSupport is limited in my opinion.

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