Angular(v8)应用集成Web Component Polyfills在IE11中失效求助

我刚好处理过类似的场景，结合你的问题细节，给你梳理几个关键的解决步骤：

1. 优先处理Polyfill加载顺序冲突 #

IE11对ES5特性和Web Component Polyfill的加载顺序非常敏感，你遇到的get-own-property-symbols.max.js错误，大概率是Angular自动生成的polyfill-es5.js与Web Component Polyfill的加载顺序颠倒导致的。

调整angular.json中的脚本加载顺序，将Web Component的Polyfill放在polyfill-es5.js之前：

"build": {
  "options": {
    "scripts": [
      "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
      "src/polyfills-es5.js"
    ]
  }
}

如果还没安装Web Component Polyfill包，先执行安装：

npm install @webcomponents/webcomponentsjs --save-dev

2. 手动补充Symbol相关Polyfill #

IE11原生不支持Symbol，而Web Component Polyfill依赖该特性，Angular自带的Polyfill可能存在兼容缺口。你可以在src/polyfills.ts顶部手动添加核心Polyfill，确保Web Component Polyfill加载前基础特性已到位：

// 先加载Symbol及相关特性的Polyfill
import 'core-js/es/symbol';
import 'core-js/es/object/get-own-property-symbols';
// 再加载Web Component的完整Polyfill
import '@webcomponents/webcomponentsjs/webcomponents-bundle';

添加后记得把angular.json中scripts数组里的Web Component脚本移除，避免重复加载。

3. 确认IE11的构建配置正确 #

• 在tsconfig.json中确保编译目标为ES5：

  "compilerOptions": {
    "target": "es5",
    // 其他配置...
  }
  

• 在browserslist文件中明确包含IE11：

  > 0.5%
  last 2 versions
  Firefox ESR
  not dead
  IE 11
  

4. 验证启动流程 #

按照你的示例仓库步骤重新执行：

• 克隆仓库并安装依赖：npm install
• 启动应用时使用ES5兼容模式：ng serve --configuration es5（如果你的angular.json中配置了es5环境），或直接ng serve（因为已设置target为es5）

完成以上步骤后，IE11应该不会再出现get-own-property-symbols.max.js的错误，同时Web Component也能正常运行。

内容的提问来源于stack exchange，提问作者Nathan