Search code examples
angularmicrosoft-edgepolyfillsstenciljs

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

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

Solution

  • 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.