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

Question

The Angular 2 animations documentation refers to the Web Animations API polyfill for browsers that don\'t support the native one.

What\'s the proper

Answer 1

I guess you have already done the most steps. Just to make it complete:

1) run npm install web-animations-js --save

2) add web-animation-js to angular-cli-build.js to make clear it is a vendor package:

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

3) Configure 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'}
};

The main point here is that we need to tell system-js what the main file of this package is. System-js is not able to get this information from the package.json file - system-js expects the file is index.js. But it is not. It is web-animations.min.js.

4) In your main.ts file add:

import 'web-animations-js';

5) Stop and restart all processes that are using the angular-cli-build.js (ng server, ng test, etc).

Now system js will load the web-animation.js polyfill.

Answer 2

I just did this with Visual Studio + gulp.

1. Add this line to packages.json:

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

This will make sure that the package is downloaded to node_modules folder.

2. Add this line to gulpfile.js in the gulp.src array:

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

This will make sure that the file is copied into libs folder (or whatever you specified) during every gulp build.

3. And this is how you import it in TypeScript:

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

Answer 3

Adding the polyfill with the newer, Webpack version of Angular CLI is easier:

1. Install with npm install web-animations-js --save

2. Add to polyfills.ts: require('web-animations-js/web-animations.min');

It also worked if I do import 'web-animations-js/web-animations.min';

Answer 4

Angular 6 Note - Polyfill no longer required :-)

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 5

In Angular 4 simply follow the below steps :

1. add web-animations-js as a dependency :

   npm install web-animations-js

2. And uncomment the following line in polyfils.ts

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