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

Question

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

将这个 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 中不起作用）。

我只是通过在 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 更容易：

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 注意 - 不再需要 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中的以下行

   导入“网络动画-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 完成的。

1. 将此行添加到packages.json：

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

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

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

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

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

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

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

Answer 6

您可以按照以下 3 个步骤操作：

1- 运行这个命令： npm i -D web-animations-js

2- 将这些代码行添加到“angular.json”文件中。

{
...
"projects:" {
  ...
  "architect": {
    ....
    "build": {
      ...
      "scripts": [
              {
                "input": "node_modules/web-animations-js/web-animations.min.js",
                "inject": false,
                "bundleName": "web-animations-js"
              }
            ],

第三，将这几行代码添加到“ployfills.ts”文件中。

if (!('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent))) {
  const script = document.createElement('script');
  script.src = 'web-animations-js.js';
  document.head.appendChild(script);
}

请注意，我已将代码括在 if 语句中，因为此代码会在旧的 iOS 设备上产生问题，通常在 iPhone 6 和 iOS 12 中