Angular Elements Polyfills to use in IE11 and Edge problems

Question

Following on from my last post here, where I have an Angular elements project, which I can get working in Chrome if compile with TS target of es2015, I have now gone back to compile with es5 (in preparation to try and get working in Edge and IE11).

After the build to es5, I combine the following output files:

const fs = require('fs-extra');
const concat = require('concat');

(async function build() {  
  const files = [
    './dist/angular-webcomponents-demo/runtime.js',
    './dist/angular-webcomponents-demo/polyfills.js',
    './dist/angular-webcomponents-demo/scripts.js',
    './dist/angular-webcomponents-demo/main.js',
  ]

  await fs.ensureDir('elements')
  await concat(files, 'elements/analytics-counter.js');    
  console.info('Angular Elements created successfully!')

})()

One question I have is when I build the project, I get two polyfill files, es2015-polyfills.js and polyfills.js.

And I have just included the polyfills.js in the concat script above, so wondering what the es2015-polyfills.js is for.

Carrying on, I then include the built component in a very simple test application, and now include the two scripts from the @webcomponents/webcomponentsjs package

So my test host html now looks like:

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  
  <!-- Polyfill for Chrome since we built element using es5 -->
  <script src="./node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>

  <!-- Polyfill for Edge and IE -->
  <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

  <!-- Custom element script  -->
  <script src="analytics-counter-es5.js"></script>
</head>

<body>
  <!-- Custom element....  -->
  <analytics-counter></analytics-counter>  
</body>
</html>

I now test using http-server -p 8209, and first this works in Chrome, so I assume this is the custom-elements-es5-adapter.js working for the es5 built component.

Next Edge I get the error:

ERROR TypeError: Object doesn't support property or method 'createShadowRoot'

Also, in the vscode terminal where I am running http-server, I see the following output with a lot of 404s (scroll to the right):

        Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:19 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" "Mozilla/5.0 (Windows NT 10.0; Win64;
    x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:19 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:19 GMT+0800 (Australian Western Standard Time)] "GET /favicon.ico" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:19 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js.map" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:19 GMT+0800 (Australian Western Standard Time)] "GET /favicon.ico" Error (404): "Not found"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/util/makeiterator]" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:util/global]" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/util/setprototypeof]" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:util/defineproperty]" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/generator_engine]" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/util/arrayfromiterator]" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/util/makeiterator]" Error (404): "Not found"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:util/global]" Error (404): "Not found"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/util/setprototypeof]" Error (404): "Not found"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:util/defineproperty]" Error (404): "Not found"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/util/arrayfromiterable]" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/symbol]" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/generator_engine]" Error (404): "Not
    found"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/util/arrayfromiterator]" Error (404): "Not found"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/util/arrayfromiterable]" Error (404): "Not found"
    [Wed Aug 21 2019 15:01:20 GMT+0800 (Australian Western Standard Time)] "GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:es6/symbol]" Error (404): "Not found"

Finally in IE, I see the following:

Also interestingly for IE there are no errors in the vscode terminal as I saw for Edge.

So, it appears the webcomponents-loader.js is not working for Edge and IE.

Note I have included these polyfills in the test host app, and NOT the project where I build the component. DO these belong in the host app, or the actual component itself, which seem to be what is happening here (see around 21.10)..

Why does the polyfill not seem to be working for Edge and IE?

Update 1

I could get to work in Edge by following the suggestions in this post, ie I removed the encapsulation: ViewEncapsulation.Native and it now works in Edge (and Firefox). My remaining problem is IE where I get the Object.getOwnPropertyNames: argument is not an Object error.

This is coming from the following:

Update 2

Both Edge and Firefox seem to work without the webcomponents-loader.js included, however without this, IE gets a different error: Object doesn't support property or method 'from'

Adding it back, Firefox and Edge both still work, though a request via edge does show errors in the http-server console:

"GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:util/global]" Error (404): "Not found" - even so, the element still renders.

So, IE is still not working.

@sam_dev - unfortunately no. after spending quite some time on it, I had to give up on this, and haven't tried again since. — peterc, Jul 22 '20 at 22:43

Angular Elements Polyfills to use in IE11 and Edge problems

Update 1

Update 2

0 Answers0

Linked