Angular8自定义元素在IE11中被AngularJS调用时无法正常运行

核心原因说明 #

该问题本质是AngularJS宿主环境与Angular 8自定义元素的polyfill加载冲突、执行上下文不兼容导致，独立运行自定义元素正常是因为没有AngularJS环境的polyfill覆盖、脏检查机制干扰。 #

具体修复步骤 #

1. 调整polyfill加载规则（优先级最高） #

• 所有polyfill统一在AngularJS入口最顶部加载，严格遵循加载顺序：ES规范polyfill → DOM/WebAPI polyfill → Zone.js → AngularJS/自定义元素代码，禁止在Angular 8自定义元素构建产物中重复打包polyfill，所有polyfill统一由AngularJS侧提供。
• 在现有AngularJS polyfill列表中补充ES6全量polyfill，放在现有polyfill之后、其他业务代码之前：

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/set';
import 'core-js/es6/reflect';

• 将@webcomponents/custom-elements polyfill的引入位置调整到zone.js之前，避免自定义元素注册逻辑被zone拦截导致IE11下异常。

2. 解决Zone.js与AngularJS执行上下文冲突 #

• 在引入zone.js之前添加全局配置，关闭zone对AngularJS异步事件的接管：

window.__Zone_disable_requestAnimationFrame = true;
window.__Zone_disable_on_property = true;
window.__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove'];

• 自定义元素加载完成后，手动触发AngularJS根作用域脏检查：$rootScope.$applyAsync()，避免自定义元素渲染后AngularJS视图不同步。

3. 调整webpack构建配置 #

• 将Angular 8自定义元素的构建产物加入babel转译范围，避免残留ES6语法无法被IE11识别。
• 替换webpack的devtool配置为不依赖eval的类型（如source-map），IE11不支持eval类sourcemap格式。

4. 调整自定义元素注册时机 #

• 不要在AngularJS的config阶段注册自定义元素，统一放在run阶段或者DOMContentLoaded事件触发后执行，AngularJS 1.2的config阶段DOM上下文未完全初始化，IE11下注册自定义元素会失败。

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