Exception: TypeError el.createShadowRoot is not a function (Safari/Edge)

[brendanalexdr]

Hi, I am grooming an angular2 app for publication. The app works great in chrome and safari, but not in Safari or Edge:

Here is a snippet of the error in safari:

TypeError el.createShadowRoot is not a function

And similarly in Edge:

Object doesn't support property or method 'createShadowRoot'

I have a question open on stackoverflow here: http://stackoverflow.com/questions/34824758/angular2-exception-typeerror-el-createshadowroot-is-not-a-function-safari-edge

Is there a shim or polymer that I need? Any help would be much appreciated!

[0x-r4bbit]

This is because the browsers where the error is thrown don't support native ShadowDOM.

Did you reconfigure the view encapsulation? Because actually it defaults to "emulated" which doesn't rely on the native APIs.

[mhevery]

Sounds like you are using native shadow DOM which is only available in Chrome.

[zoechi]

Loading the http://webcomponents.org/polyfills/ should make it work in other browsers as well

[BaamAadmi]

I am getting the same error on Firefox as well. What is the reason behind this? Is it because of following line?

encapsulation: ViewEncapsulation.None, //This is important to load any external styles

[zoechi]

@BaamAadmi only if you are adding "external styles" to components.
If you add them to index.html, you don't need to change ViewEncapsulation

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