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!
Best Answer
Adding the polyfill with the newer, Webpack version of Angular CLI is easier:
Install with
npm install web-animations-js --save
Add to
polyfills.ts
:require('web-animations-js/web-animations.min');
It also worked if I do
import 'web-animations-js/web-animations.min';