How to make stenciljs component work with angular 2+ on Edge

Question

I'm importing custom element from Stenciljs into angular.
Everything work fine on the modern browser but doesn't work on Edge (nor IE11)
Is that something special I should do to make it work?

I'm using "@stencil/core": "1.1.9"
"@angular/core": "~7.2.13"
also tried with angular 8 but the same error happen.

I become those errors :
1. ERROR TypeError: Unable to get property '$hostElement$' of undefined or null reference
2. SCRIPT5007: SCRIPT5007: Unable to get property '$flags$' of undefined or null reference

It seems I have to do something on the angular side but I couldn't manage what.
I tried :
1. Using the angular polyfills
2. importing 'core-js/es7/reflect' into these polyfill
3. Add document-register-element script tag into my index.html

The stencil elements are working fine on Edge when I use them directly without angular

This doesn't sound like a Stencil problem - have you tried to get an Angular app running in Edge without stencil components? If not, get that sorted first. — G. Tranter
Please check the stencil browser support, it seems that the stencil component support in Edge is currently in development, and the custom elements are not supported Microsoft Edge element.Besides, here is an article about using stencil with angular, you could check it. — Zhi Lv
@G.Tranter Everything that aren't coming from stencil works fine (e.g. normal angular component) — Raphaël Balet

nmina nmina · Accepted Answer · 2019-07-23T18:03:45

First, make sure you have followed the integration process for Angular as mentioned here: https://stenciljs.com/docs/angular

Then to support IE11 or Edge, try to include applyPolyFills(), if you haven't tried yet, when you invoke defineCustomElements(window) like so:

In your main.ts or where you have it included:

import {applyPolyfills, defineCustomElements} from 'path/to/stencil/loader';


applyPolyfills().then(() => {
   defineCustomElements(window);
});

I think it was not mentioned directly in Framework Integration documentation for Angular but it was mentioned in JavaScript integration section: https://stenciljs.com/docs/javascript

Hope it helps.

How to make stenciljs component work with angular 2+ on Edge

1 Answers