时间戳

首页 > 解决方案 > 用于 IE11 和边缘问题的 Angular Elements Polyfills

angular - 用于 IE11 和边缘问题的 Angular Elements Polyfills

问题描述

继我在这里的上一篇文章之后，我有一个 Angular 元素项目，如果使用 TS 目标编译，我可以在 Chrome 中工作es2015，我现在已经回去编译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.

我刚刚polyfills.js在上面的 concat 脚本中包含了，所以想知道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 构建的组件。

下一个边缘我得到错误：

ERROR TypeError: Object doesn't support property or method '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 中，我看到以下内容：

在此处输入图像描述

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

因此，它似乎webcomponents-loader.js不适用于 Edge 和 IE。

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

在此处输入图像描述

为什么 polyfill 似乎不适用于 Edge 和 IE？

更新 1

我可以按照这篇文章中的建议开始在 Edge 中工作，即我删除了encapsulation: ViewEncapsulation.Native它，它现在可以在 Edge（和 Firefox）中工作。我剩下的问题是我得到Object.getOwnPropertyNames: argument is not an Object错误的 IE。

这来自以下内容：

在此处输入图像描述

更新 2

Edge 和 Firefox 似乎都可以在没有包含的情况下工作，但是webcomponents-loader.js没有这个，IE 会得到一个不同的错误：Object doesn't support property or method 'from'

添加回来后，Firefox 和 Edge 仍然可以工作，尽管通过 edge 发出的请求确实在 http-server 控制台中显示错误：

"GET /node_modules/@webcomponents/webcomponentsjs/bundles/%20[synthetic:util/global]" Error (404): "Not found"- 即便如此，元素仍然呈现。

所以，IE仍然无法正常工作。

标签： angularangular-elements

解决方案

推荐阅读