Angular 4项目（含Material Design）在Safari中RequestAnimationFrame报错无法加载如何解决？

我之前维护Angular 4项目时也碰到过一模一样的问题——集成Material Design后在Safari里无法正常加载，还抛出RequestAnimationFrame相关报错。折腾一阵后总结了几个亲测有效的解决办法，你可以挨个尝试：

1. 补全必要的Polyfills #

Safari（尤其是旧版本）对Web动画API和RequestAnimationFrame的原生支持不如Chrome/Firefox，而Material Design大量依赖动画效果，这是最常见的问题根源：

• 首先安装web-animations-js这个专门补全Web动画支持的polyfill：

  npm install web-animations-js --save
  

  然后在项目根目录的polyfills.ts文件末尾添加：

  import 'web-animations-js';
  

• 如果是Safari 9及以下的超旧版本，还需要手动补全RequestAnimationFrame的兼容代码，同样放在polyfills.ts里：

  // 兼容旧版Safari的RequestAnimationFrame
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback: FrameRequestCallback) {
      return setTimeout(callback, 1000 / 60);
    };
    window.cancelAnimationFrame = function(id: number) {
      clearTimeout(id);
    };
  }
  

2. 调整浏览器兼容性配置 #

如果用Angular CLI构建项目，默认的浏览器兼容配置可能没覆盖Safari需求，导致编译出的代码不兼容：

• 找到项目根目录的browserslist文件，修改内容为：

  last 2 Chrome versions
  last 2 Firefox versions
  last 2 Safari versions
  iOS >= 9
  

• 保存后重新编译项目：

  ng build --prod
  

  开发环境则重启ng serve，让配置生效。

3. 临时禁用Material动画（应急排查） #

如果上面的方法暂时没见效，可以先禁用Material的所有动画，确认是不是动画模块导致的问题：

• 打开app.module.ts，把原来导入的BrowserAnimationsModule替换成NoopAnimationsModule：

  // 注释掉原来的BrowserAnimationsModule
  // import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NoopAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [
      // ...其他模块
      NoopAnimationsModule // 用这个替代
    ]
  })
  export class AppModule { }
  

  这个方法会关闭所有Material的动画效果，适合快速排查问题，要是项目对动画没硬性要求也可以长期使用。

4. 检查Safari版本 #

如果用户使用的是Safari 8及以下的超旧版本，Angular 4本身的官方支持就有限，这种情况建议引导用户升级到最新稳定版的Safari，或者明确项目的最低浏览器支持版本。

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