Recommended approach to using Angular Elements with Internet Explorer 11

Question

Looking for guidance on how to use Angular Elements that will work across other browsers especially with Internet Explore 11.

So far following the recommended convention of using ngDoBootstrap to define the custom element (Angular Element). It only works in Chrome but when it comes to IE the element tag is visible in the DOM but nothing shows on the browser. The architecture is as follows: Components, services, pipes... are all separated into modules.

A parent component is then defined using customElements.define(). Once this is applied in the DOM, actions such as click events change detection... work very well in chrome (current version: 72.0.3626.121) but in IE nothing shows. I have spent some hours looking at different approaches to get it working in IE. I have looked at some of the questions and answers provided here especially using polyfills but no success.

I then tried to define one component at a time in the order of parent > child but again ran into different issues where by IE started to throw script errors one notably to do with zone.js and vendor.js (but not in chrome). On doing so I was able to see the element but the actions and change detection do not work.

I attempted this approach here but then started to encounter dependency injection errors. So far one problem leads to another.

The reason for opting to use AngularElements is to try and integrate it with an existing project written in a different tech stack.

Exorcise

did you solve all your problems? Does angular 10 elements support IE11? – Leland

Na, I abandoned the approach. you better off writing your own custom elements but this will depend on what you want you want to achieve @Leland – Exorcise

Answer 1

In addition to adding polyfills, I also needed to declare the Zone_enable_cross_context_check. I was then able to see the contents of the parent component's template rendered in the DOM. From then on the change detection doesn't work as expected for all the other components especially in the template. The ngIf doesn't work because the template is never updated. I don't know why it doesn't work provided I have all the polyfils and the elements-zone-strategy is used to define the custom element.

Below are a few images showing this:

After subscribing when the data is fetched successfully:

The template:

SetTimeout:

As you can see in IE change detection doesn't work as i expect it to. In this scenario it only works once when the element(component) is loaded but for other events it doesn't. I have tried using changeDetectorRef to detectChanges where needed. This hasn't been successful.

The screenshots are taken from Internet Explorer 11. Below is one from Chrome showing change detection working as expected and content also loaded succesfully as a result.

Chrome:

I will conclude by saying Angular Elements work well in chrome but in IE they don't and if you are to make them work in IE, you'd need to invest a lot of time finding solutions as to why this and that doesn't work. That time is better off used working with another library/framework.

Exorcise

Answer 2

From the official document we could see that:

The recently-developed custom elements Web Platform feature is currently supported natively in a number of browsers. Support is pending or planned in other browsers.

I also try to test the official document contain's demo, it works well in the Chrome browser, not working in IE/Edge browser.

In the IE browser it will show the syntax error, like this:

So, as the official document said, they are working on implementing custom element to support IE/Edge browser. You could also feedback this issue to Angular Issues.

Personalism

Answer 3

Its support all browser, you need to change polyfill.ts file

1. For support Internet Explorer 9, 10 or 11 and Chrome <55, 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/weak-map'; import 'core-js/es6/set';

2. IE10 and IE11 requires the following for NgClass support on SVG elements

   import 'classlist.js'

3. IE10 and IE11 requires the following for the Reflect API.

   import 'core-js/es6/reflect';

so go to your src/pollyfill.ts file enable these Internet Explorer dependency's. if any dependency missing you can use these. and works fine.
You can learn more about angular Browser support here

Cirrate

The above polyfills already exist. I have narrowed it down to the problems arising from the change detection. Apart form adding the recommended polyfills . I realised that i need to go beyond and add other implementations for Zone_enable_cross_context_check. This prevented a specific error from occurring in ie when loading the element. From now on it seems the change detection does not work as expected in ie. Will follow up with an answer shortly – Exorcise

are you sure about change detection not working in ie? – Cirrate