0

Im trying to use the web component polyfills in an Angular (v8) application, it does not seem to be working in IE11. I have created a very basic repository that will produce the issue. The repository is of a brand new Angular application (from running ng new). I have instructions in the repo on how to quickly clone, setup the repo and serve the app using es5 code. When doing so, you will get the following issue in IE11 (Version 11.0.9600.17031): enter image description here

The error has something to do with the polyfill-es5.js file that Angular produces. If I remove this file from the index.html page, the error will not occur (obviously the whole app wont work as well).

I have no idea how to load the web component polyfills so they will work in IE11??

After adding in the map files, the issue is coming from the get-own-property-symbols.max.js file.

Nathan
  • 111
  • 1
  • 6

1 Answers1

2

I fixed the issue by adding the webcomponent polyfills to the angular.json file instead of in the index.html file.

"scripts": [
          "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
          "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"
        ]

I also managed to get an Angular v8 app setup using a lit element component. If anyone is interested, you can view the repo here: Angular v8 with lit elements

Nathan
  • 111
  • 1
  • 6