如何将Web Animations API polyfill添加到使用Angular CLI创建的Angular 2项目中

Question

该角2个动画文件是指网络动画API填充工具为不支持原生的一个浏览器.

将此polyfill添加到使用Angular CLI创建的Angular 2项目的正确方法是什么？

(我使用的是angular-cli:1.0.0-beta.10)

没有运气,我尝试了这里提到的想法和解决方案:

• https://github.com/angular/angular-cli/issues/949
• https://github.com/angular/angular-cli/issues/1015
• https://github.com/angular/angular-cli/issues/718#issuecomment-225493863

我通过NPM下载并添加到system-config.ts.我相信这是推荐的,但polyfill没有加载(我可以告诉因为动画在Safari中不起作用).

我只是通过将polyfill包括在内来实现index.html这一点,我知道这不是正确的方法:

  <script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>

我将在这里添加任何可能有助于澄清我的问题的细节,但是如果你需要查看代码,我在Github上有它:

https://github.com/cmermingas/connect-four

提前致谢!

Answer 1

使用较新的Webpack版本的Angular CLI添加polyfill更容易:

1. 安装时 npm install web-animations-js --save

2. 添加到polyfills.ts:require('web-animations-js/web-animations.min');

如果我这样做,它也有效 import 'web-animations-js/web-animations.min';

Answer 2

Angular 6 Note - 不再需要Polyfill :-)

动画性能改进

我们已经更新了动画的实现,不再需要web动画polyfill.这意味着您可以从应用程序中删除此polyfill并保存大约47KB的包大小,同时在Safari中增加动画性能.

:-)

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Answer 3

在Angular 4中,只需按照以下步骤操作:

1. 将web-animations-js添加为依赖项:

   npm install web-animations-js

2. 并取消注释以下行 polyfils.ts

   import'web-animations-js'; //运行npm install --save web-animations-js.