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

Question

Angular 2 animations documentation refers to the 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

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

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

2) 在angular-cli-build.js中添加web-animation-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 2

使用较新的 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 3

我刚刚用 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';

Answer 4

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

添加 web-animations-js 作为依赖：

npm 安装 web-animations-js
并取消注释 polyfils.ts
中的以下行
进口'web-animations-js'； // 运行 npm install --save web-animations-js.

Answer 5

Angular 6 注意 - 不再需要 Polyfill :-)

Animations Performance Improvements

We’ve updated our implementation of Animations to no longer need the web animations polyfill. This means that you can remove this polyfill from your application and save approximately 47KB of bundle size, while increasing animations performance in Safari at the same time.

:-)

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

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 语句中，因为此代码通常会在 iPhone 6 中的旧 iOS 设备上产生问题iOS 12

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

How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI

angular

angular-cli

Angular 6 注意 - 不再需要 Polyfill :-)