Problem with Angular Element support in chrome and IE11 simultaneously

Question

I have been playing around with Angular Elements and trying to achieve the best browser compatibility possible. However I seem to have hit a dead end, since when I add an IE

Answer 1

If I understand it correctly the issue relates to the fact that IE11 doesn't support classes and that Chrome must have classes for webcomponents. There is a wrapper that lets you have one bundle and then wrap the functional-approach in a class for chrome, but I would recommend having two seperate bundles for this instead, and not compile to es5 for browsers that understand classes.

Answer 2

Getting custom elements to work in IE11 is really a torture. I may not bring you there, but at least one step further.

I think you did almost everything right, I've gone through the same steps, but I used diffrent polyfills, so maybe you want to try these:

angular.json

"scripts": [
  // removed polyfill `document-register-element.js` that may be included with ng add @angular/elements
]

polyfills.ts

import '@webcomponents/shadydom/shadydom.min.js';
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

---

To check if it might be a version problem:

package.json (relevant parts)

{
  "dependencies": {
    "@angular/**": "~7.2.1",
    "@webcomponents/custom-elements": "^1.2.1",
    "@webcomponents/shadydom": "^1.4.2",
    "core-js": "^2.5.4",
  }
}

Info: With this configuration, the custom element works in Chrome, Firefox and IE11 for me, but I don't get output bindings to work in IE11. I don't know why this is caused, if you are interested in this and find a solution to it, you may provide it here.

---

Genral tip for IE11:
Not your problem now, but if IE11 throws one of its various erros, it helped me a lot to use import 'core-js/shim' in polyfills.ts. This imports all shims at once to check if IE11 misses one of those. If so, you can tackle it down further, if not you know you have to look elsewhere.

Angular Elements polyfill
If you want to stay with the polyfill used by Angular, you may try to use version 1.8.1. I read somewhere (but can't remember where) that later versions cause problems in IE at the moment.