Object doesn't support property or method 'from': IE11

Note: for support questions, please use the Universal Slack Channcel or https://gitter.im/angular/universal

• I’m submitting a …

• bug report
• feature request

• Which parts of preboot are affected by this issue?

• server side
• client side
• inline
• build process
• docs
• tests

• Do you want to request a feature or report a bug? Report a bug

• What is the current behavior? On IE11, Win 10. The following code will give a ‘error: Object doesn’t support property or method ‘from’’. It is part of the inline script.

// we want to add an event listener for each node and each event for (var _i = 0, _a = Array.from(nodes); _i < _a.length; _i++) { var node = _a[_i]; _loop_1(node); }

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo. Just refresh the webpage with debugger catching the error.

• What is the expected behavior? The error should not be there.

• What is the motivation / use case for changing the behavior? I am debugging a problem where the whole <app> node is deleted when client tries to bootstrap, leaving the webpage a solid white screen. This happens 9/10 times after refresh, on IE10/11/Edge, but sometimes also on Safari.

• Please tell us about your environment:

• Browser: [IE 11 ]
• Language: [ ES5 ]
• OS: [ Mac OS X ]
• Platform: [browser]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[Quovadisqc]

@CaerusKaru I might have found a problem that makes polyfills usage harder.

The problem is that in some instances, preboot kicks in before CLI polyfills are loaded.

If you pause execution at https://github.com/angular/preboot/blob/master/src/lib/api/event.recorder.ts#L47 in chrome, CLI scripts are already loaded and everything works perfectly. In IE11, some CLI scripts have not yet been downloaded (including polyfills) which causes the Object doesn't support property or method 'from' exception.

There are a few ways to solve this:

• Users could manually insert polyfills that are needed for preboot higher, in the head tag (CLI scripts are inserted at the end of the body). This might not be the correct solution since it should probably work with the official CLI setup.
• You could wait for document state to be complete before initializing preboot start

if (doc.body && doc.readyState === 'complete') {
    start(data);
}

This also might not be optimal since it would delay preboot initialisation. What do you think?

On a side note, even while using all of the CLI polyfills, you also need to polyfill element.remove.

[IAMtheIAM]

@jimguyer Thanks for that tip. I completely missed that I have to uncomment those lines for IE11 support. It should probably be uncommented by default, but the Angular CLI team probably has their reasons for not doing that.

By the way, the v3.6.5 of core-js changed their exports structure, and dropped the 6 from es6 - so now its just:

import 'core-js/es/symbol';