如何网页动画API填充工具添加到使用角度CLI创建的角2项目如何网页动画API填充工具添加到使用角度

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

什么是这个填充工具添加到使用角度CLI创建的角2项目的正确方法？

（我使用角-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 。我相信这是沿着一个什么样的建议，但填充工具不会被加载（我可以告诉大家，因为动画不会在Safari工作）的行。

我只得到了这通过在填充工具工作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:

角6注 - 填充工具不再需要:-)

动画性能改进
我们更新了我们的实现动画的不再需要的网络动画填充工具。这意味着，你可以删除你的应用程序这种填充工具，并节省约束的大小47KB，而在同一时间的增加在Safari中的动画性能。

:-)

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

Answer 2:

与角CLI的更新，版本的WebPack添加填充工具更容易：

与安装npm install web-animations-js --save
添加到polyfills.ts ： require('web-animations-js/web-animations.min');

它还工作，如果我做import 'web-animations-js/web-animations.min';

Answer 3:

在角4只需按照下面的步骤：

添加网络动画-JS作为依赖性：
NPM安装网络动画-JS
并取消下面的行polyfils.ts
进口 '网络动画-JS'; //运行npm install --save web-animations-js 。

Answer 4:

我猜你已经做过的最步骤。这只是为了完成：

1）运行NPM安装网络动画-JS --save

2）添加web的动画-JS于角-CLI-build.js弄清它是供应商包：

return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
       ...
      'web-animations-js/**/*'
    ]
});

3）配置系统-JS（系统config.ts）

/** Map relative paths to URLs. */
const map: any = {
  'web-animations-js': 'vendor/web-animations-js'
};

/** User packages configuration. */
const packages: any = {
  'web-animations-js': {main: 'web-animations.min.js'}
};

这里主要的一点是，我们需要告诉系统JS这个包的主要文件是什么。系统JS是不是能够得到来自的package.json文件信息-系统JS预计该文件index.js。 但事实并非如此。这是网络animations.min.js。

4）在您的main.ts文件中加入：