Question

Angular 2 animations documentation指的是不支持原生浏览器的浏览器的Web Animations API polyfill。

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

（我正在使用angular-cli：1.0.0-beta.10）

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

我是通过NPM下载并将其添加到system-config.ts。我相信这与推荐的内容类似，但是polyfill没有加载（我可以说，因为动画在Safari中不起作用）。

我只是通过在index.html中加入polyfill来实现这一点，我知道这不是正确的方法：

  <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更容易：

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

如果我import 'web-animations-js/web-animations.min';

Answer 2

Angular 6注 - 不再需要Polyfill： - ）

动画效果改进

我们已更新了我们的实施   动画不再需要网络动画polyfill。这个   表示您可以从应用程序中删除此polyfill并保存   大约47KB的束大小，同时增加动画   同时在Safari中表现。

： - ）

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

Answer 3

在Angular 4中，只需按照以下步骤操作：

将web-animations-js添加为依赖项：

npm install web-animations-js
取消注释polyfils.ts
中的以下行
import'web-animations-js'; //运行npm install --save web-animations-js。

Answer 4

我猜你已经完成了最多的步骤。只是为了完成它：

1）运行npm install web-animations-js --save

2）将 web-animation-js 添加到 angular-cli-build.js 以明确它是供应商包：

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

3）配置system-js（system-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'}
};

这里的要点是我们需要告诉system-js这个包的主要文件是什么。 System-js无法从 package.json 文件中获取此信息 - system-js期望该文件是 index.js 。但事实并非如此。它是 web-animations.min.js 。

4）在 main.ts 文件中添加：

import 'web-animations-js';

5）停止并重新启动使用angular-cli-build.js（ng服务器，ng测试等）的所有进程。

现在系统js将加载 web-animation.js polyfill。

Answer 5

我刚用Visual Studio + gulp做了这个。

将此行添加到packages.json：

"web-animations-js": "^2.2.2"

这将确保将包下载到node_modules文件夹。

将此行添加到gulp.src数组中的gulpfile.js：

'web-animations-js/web-animations.min.js'

这将确保在每次gulp构建期间将文件复制到libs文件夹（或任何你指定的文件夹）。

这就是你在TypeScript中导入它的方式：

import 'libs/web-animations-js/web-animations.min.js';

如何将Web Animations API polyfill添加到使用Angular CLI

5 个答案:

Angular 6注 - 不再需要Polyfill： - ）