Angular 5/6加载web-animations-js polyfill兼容IE9的方案

针对你提到的两个场景，我整理了对应的可行方案，核心思路是通过浏览器检测实现条件加载，避免IE9加载不兼容的polyfill：

Angular 5 实现方案 #

在Angular 5中，你可以直接在polyfills.ts里通过浏览器判断+require()来实现条件加载，这也是你之前验证过可行的方式，明确写法如下：

// polyfills.ts
// 判断是否为IE9及以下浏览器
if (!document.documentMode || document.documentMode > 9) {
  // 仅在非IE9浏览器中加载polyfill
  require('web-animations-js');
}

原理很简单：IE9的document.documentMode会返回9，因此条件不成立，不会执行加载；现代浏览器不存在这个属性（返回undefined），条件成立后会正常加载polyfill。

Angular 6 实现方案 #

Angular 6默认使用Webpack 4，对CommonJS的require()支持有限，推荐使用ES标准的动态import()来实现条件加载，这里提供两种常用方式：

方式1：在polyfills.ts中动态导入 #

直接在polyfills.ts里做条件判断，用动态import加载polyfill：

// polyfills.ts
if (!document.documentMode || document.documentMode > 9) {
  // 动态导入polyfill，无需等待加载完成即可继续引导应用
  import('web-animations-js');
}

这种方式简单直接，polyfill会并行加载，不会阻塞应用初始化流程。

方式2：在main.ts中延迟应用引导（确保polyfill加载完成后再启动） #

如果你需要确保polyfill加载完成后才初始化应用，可以修改main.ts：

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

const bootstrapApp = () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
};

// 条件加载polyfill后引导应用
if (!document.documentMode || document.documentMode > 9) {
  import('web-animations-js').then(bootstrapApp);
} else {
  // IE9直接启动应用，不加载polyfill
  bootstrapApp();
}

额外注意事项 #

• 确保你安装的web-animations-js是稳定版本，避免引入带有IE9不兼容语法的代码；
• 测试IE9时记得清除浏览器缓存，避免之前加载过的polyfill残留导致报错；
• 如果应用还依赖其他polyfill，要确保它们的加载顺序不会产生冲突。

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