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

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';


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


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.