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.

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.