Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 852
Carlos Mermingas Avatar asked Aug 08 '16 18:08

Carlos Mermingas


2 Answers

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

like image 180
Carlos Mermingas Avatar answered Sep 22 '22 13:09

Carlos Mermingas


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

like image 45
Simon_Weaver Avatar answered Sep 21 '22 13:09

Simon_Weaver