title: How to add Web Animations API polyfill to an Angular 2 project created with Angular CLI
body: <p>The <a href="https://angular.io/docs/ts/latest/guide/animations.html" rel="noreferrer">Angular 2 animations documentation</a> refers to the <a href="https://github.com/web-animations/web-animations-js" rel="noreferrer">Web Animations API polyfill</a> for browsers that don't support the native one.</p>
  
  <p><strong>What's the <em>proper</em> way to add this polyfill to an Angular 2 project created with Angular CLI?</strong></p>
  
  <p>(I am using angular-cli: 1.0.0-beta.10)</p>
  
  <p>With no luck, I have tried the ideas and solutions mentioned here:</p>
  
  <ul>
  <li><a href="https://github.com/angular/angular-cli/issues/949" rel="noreferrer">https://github.com/angular/angular-cli/issues/949</a></li>
  <li><a href="https://github.com/angular/angular-cli/issues/1015" rel="noreferrer">https://github.com/angular/angular-cli/issues/1015</a></li>
  <li><a href="https://github.com/angular/angular-cli/issues/718#issuecomment-225493863" rel="noreferrer">https://github.com/angular/angular-cli/issues/718#issuecomment-225493863</a></li>
  </ul>
  
  <p>I downloaded it via NPM and added it to <code>system-config.ts</code>. I believe this is along the lines of what's <em>recommended</em> but the polyfill doesn't get loaded (I can tell because the animations don't work in Safari).</p>
  
  <p>I only got this to work by including the polyfill in <code>index.html</code>, which I know it's not the proper way:</p>
  
  <pre><code>  &lt;script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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: </p>
  
  <p><a href="https://github.com/cmermingas/connect-four" rel="noreferrer">https://github.com/cmermingas/connect-four</a></p>
  
  <p>Thanks in advance!</p>