angular - 在 IE11 中使用 `ViewEncapsulation.ShadowDom work` 执行 Angular Elements

Question

当视图封装设置为时，Angular Elements 是否能够创建可以在 IE11 中运行的 Web 组件ShadowDom？它是否需要手动添加 polyfill？

该文档建议您只需要ng add @angular/elements在 ES2015 和 ES5 中编译项目。https://angular.io/guide/elements#browser-support-for-custom-elements

我已经用 Angular 9 试过这个，但它没有在 IE11 中加载。

我可以使用https://www.webcomponents.org/polyfills在 IE11 中加载一个标准的 Web 组件 。按理说，如果 Angular 正在生成一个真正的自定义元素，它也应该能够工作。

有没有人有 Angular Element、ShadowDOM、IE11 版本的工作，或者只是不可能。

谢谢你的帮助

标签： angularinternet-explorer-11web-component

Answer 1

由于 Internet Explorer 不支持 ECMAScript 2015 (ES6)，首先，我们需要将 Angular 9 应用程序配置为以 ES5 模式构建。然后，为 Angular Elements 安装 polyfill。

请参考以下步骤：

1. 在 tsconfig.app.json 旁边创建一个新的 tsconfig tsconfig-es5.app.json，内容如下：

   {
       "extends": "./tsconfig.json",
       "compilerOptions": {
           "target": "es5" 
       }
   }
   

2. 在 angular.json 的 build 和 serve 目标下添加两个新的配置部分以提供新的 tsconfig（es5 节点，请记住将“yourAppName”更改为您的应用程序名称）。

   "build": {
       "builder": "@angular-devkit/build-angular:browser",
       "options": {
           ...
       },
       "configurations": {
       "production": {
           ...
       },
       "es5": {
           "tsConfig": "./tsconfig.es5.json"
       }
       }
   },
   "serve": {
       "builder": "@angular-devkit/build-angular:dev-server",
       "options": {
           ...
       },
       "configurations": {
       "production": {
       ...
       },
       "es5": {
           "browserTarget": "yourAppName:build:es5"
       }
       }
   },
   

3. 使用此命令安装 Angular Elements polyfill

   `ng add @angular/elements `
   

4. 使用以下命令使用此配置运行服务。

   `ng serve --configuration es5`
   

编辑：

参考this thread，似乎角度元素在IE浏览器中仍然不支持Shadow DOM。我建议你可以将此问题反馈到Angular 论坛，并希望他们在 IE 浏览器中添加对带有 Angular 元素的 Shadow DOM 的支持