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" <notifications@github.com> 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.