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 way to add this polyfill to an Angular 2 project created with Angular CLI?

(I am using angular-cli: 1.0.0-beta.10)

With no luck, I have tried the ideas and solutions mentioned here:

• 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

I downloaded it via NPM and added it to system-config.ts. I believe this is along the lines of what's recommended but the polyfill doesn't get loaded (I can tell because the animations don't work in Safari).

I only got this to work by including the polyfill in index.html, which I know it's not the proper way:

  <script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>

I will add here any details that may help clarify my question, but if you need to see the code, I have it on Github:

https://github.com/cmermingas/connect-four

Thanks in advance!

Answer 1

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