Angular5在SharePoint2013的IE11中Web部件空白问题求助

根据你描述的情况——直接访问index.html正常，但放到SharePoint ASPX页面的内容编辑器Web部件就空白，而且已经禁用了兼容性视图，我整理了几个实用的排查和解决方向：

• 强制IE11使用最新文档模式
  SharePoint 2013的默认ASPX页面可能自带旧的DOCTYPE或者X-UA-Compatible设置，导致IE11没有用最新的渲染模式。你可以手动在ASPX页面的<head>最顶部添加：

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  

  一定要把这个标签放在所有其他meta标签前面，不然SharePoint自动生成的标签可能会覆盖它的作用。

• 补全Angular 5针对IE11的polyfills
  Angular 5对IE11的支持依赖完整的polyfills，你提到已经用了一些，但可能漏了关键项。打开项目的polyfills.ts，确保下面这些polyfills都取消注释并引入：

  import 'core-js/es6/symbol';
  import 'core-js/es6/object';
  import 'core-js/es6/function';
  import 'core-js/es6/parse-int';
  import 'core-js/es6/parse-float';
  import 'core-js/es6/number';
  import 'core-js/es6/math';
  import 'core-js/es6/string';
  import 'core-js/es6/date';
  import 'core-js/es6/array';
  import 'core-js/es6/regexp';
  import 'core-js/es6/map';
  import 'core-js/es6/weak-map';
  import 'core-js/es6/set';
  import 'classlist.js'; // 记得先运行 `npm install --save classlist.js`
  import 'web-animations-js'; // 记得先运行 `npm install --save web-animations-js`
  

  安装完依赖后重新打包部署，确保polyfills生效。

• 排查脚本冲突与加载顺序
  SharePoint的ASPX页面会加载大量自带的脚本和样式，很可能和Angular的脚本产生冲突。你可以试试：

  • 把Angular的polyfills.js、main.js等脚本引用，放到ASPX页面的</body>标签前，而不是内容编辑器Web部件里的index.html中，让Angular脚本在SharePoint自带脚本之后加载。
  • 打开IE11的开发者工具（按F12），切换到控制台面板，看看有没有报错信息——比如某个polyfill缺失、脚本加载失败，或者变量被覆盖，这些错误信息是定位问题的核心。

• 确认Angular编译目标为ES5
  检查项目的tsconfig.json，确保compilerOptions里的target设置为es5：

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

  IE11不支持ES6+语法，如果编译目标是ES6，生成的代码IE11无法解析，自然会显示空白。修改后重新打包。

• 换用Script Editor Web部件试试
  有时候Content Editor Web部件会自动过滤或修改HTML内容，导致Angular代码无法正常执行。换成Script Editor Web部件，直接粘贴打包后的Angular脚本引用和必要的HTML结构，看看是否能正常渲染。

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