1

Scenario

Created 2 different Angular elements (via 2 separate projects)

  • First one is exactly as per this tutorial - one change which was not part of the article was that i had to do 'npm i document-register-element@1.8.1' in order to get the demo working
  • Second one uses a service which gets rest api results and creates a footer

Problem 1

on IE 11, we get:

Object doesn't support property or method 'from' [jsFileName].js (4,119596)

Problem 2

blank page on Firefox, no errors on console, no errors anywhere in developer tools

Tested with

tested running the page

  • with 'static-server' and http://localhost:9080
  • tested by directly accessing the built files file:///D:/.../elements/index.html

We know that since Angular 7.3...

  • polyfills.ts has changed in a major way and should support IE9, 10 ,11 (ref: https://angular.io/guide/browser-support)
  • to be extra sure, i installed & imported (classlist.js and web-animations-js) the following 2 (as directed in polyfills.ts)
  • I didn't need to import these 2 but wanted to leave no stone unturned. We know that CLI generates a bundle containing all the polyfills needed for older browsers called es2015-polyfills.***.js and adds it in the index.html.
  • Both projects work on Chrome
  • Both projects give a blank page on Firefox 65
  • the contents of the loaded HTML & JS files is correct, so the js file is being accessed by chrome, IE11 and Firefox
Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
  • can you post the Enough code to reproduce the problem as in [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – Zhi Lv Mar 19 '19 at 02:53
  • hi @ZhiLv-MSFT, this is what i tried: https://www.telerik.com/blogs/getting-started-with-angular-elements – Akber Iqbal Mar 19 '19 at 04:11
  • Yes, I know that. But when I try to create a demo based on the link, it will show me this error "ERROR TypeError: Object doesn't support property or method 'createShadowRoot'" in IE browser, so, have you tried to change the "ViewEncapsulation.Native" to "ViewEncapsulation.Emulated"? After changing it, it seems that the custom element display well. – Zhi Lv Mar 20 '19 at 08:50
  • @ZhiLv-MSFT, after changing to "ViewEncapsulation.Emulated" - the demo is working on Firefox - however, i got a new error `SCRIPT5011: Can't execute code from a freed script` on IE only... i un commented '(window as any).__Zone_enable_cross_context_check = true;' in polyfills.ts which brought me back to the original error statement on IE *Object doesn't support property or method 'from' [jsFileName].js (4,119596)* – Akber Iqbal Mar 20 '19 at 09:41

1 Answers1

0

Have you tried adding import 'document-register-element' to the polyfills.ts. I had the same issue and it did worked.

There s good article about this.

Also refer this.

Jayampathy Wijesena
  • 1,670
  • 1
  • 18
  • 26
  • Hi @Jayampathy, even though it was redundant to add `document-register-element` to polyfills (i wrote the reasons in the question), I did it and still got the same error on IE and a blank page on FF... the link from stackOverflow was for Angular6, may be i'm getting this due to changes in Angular 7.3! – Akber Iqbal Mar 19 '19 at 04:27