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.