在IE11和Edge问题中使用的Angular Elements Polyfills

时间：2019-08-21 07:10:05

标签： angular angular-elements

从上一篇文章here开始，我有一个Angular elements项目，如果使用es2015的TS目标进行编译，则可以在Chrome中工作，现在我回到了es5（为尝试使用Edge和IE11做准备）。

在构建到es5之后，我合并了以下输出文件

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!')

})()

我的一个问题是，在构建项目时，我得到了两个polyfill文件。 es2015-polyfills.js和polyfills.js。

我刚刚在上面的concat脚本中包含了polyfills.js，所以想知道es2015-polyfills.js是干什么的。

接下来，我将构建的组件包含在一个非常简单的测试应用程序中，现在包括@webcomponents/webcomponentsjs包中的两个脚本

所以我的测试主机html现在看起来像... 

 <!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>

我现在使用http-server -p 8209进行测试，首先可以在Chrome浏览器中运行，因此我认为这是custom-elements-es5-adapter.js用于es5内置组件的作用。

下一个边缘，我收到错误消息

`错误TypeError：对象不支持属性或方法'createShadowRoot'

另外，在我运行http-server的vscode终端中，我看到以下带有很多404的输出（向右滚动）... 

        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"

最后在IE中，我看到以下内容。

enter image description here

有趣的是，对于IE，我在Edge中的vscode终端中没有错误。

因此，看来webcomponents-loader.js不适用于Edge和IE。

请注意，我已经将这些polyfill包含在测试主机应用程序中，而不是在构建组件的项目中包含了这些。这些是属于主机应用程序还是属于实际的组件本身，似乎正在发生here（请参见21.10左右）。

enter image description here

有人知道为何polyfill似乎不适用于Edge和IE吗？

在此先感谢您的帮助。

[UPDATE1]

我可以按照建议in this post在Edge中工作，即我删除了encapsulation: ViewEncapsulation.Native，现在它可以在Edge（和Firefox）中工作。我剩下的问题是IE，其中出现了Object.getOwnPropertyNames: argument is not an Object错误。

这来自以下...

enter image description here

[UPDATE2]

Edge和Firefox似乎都可以在没有的情况下正常工作，但是如果没有此功能，则IE会出现其他错误。webcomponents-loader.js

重新添加后，尽管通过edge进行的请求的确在http服务器控制台中显示了错误，但Firefox和Edge仍然可以正常工作。

Object doesn't support property or method 'from'-即便如此，该元素仍会呈现。

因此，IE仍然无法正常工作。

0 个答案:

没有答案
相关问题
最新问题