20

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:

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!

Carlos Mermingas
  • 3,822
  • 2
  • 21
  • 40
  • 2
    No longer required for Angular 6 and later :-) https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4 – Simon_Weaver May 09 '18 at 01:55

6 Answers6

40

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

Carlos Mermingas
  • 3,822
  • 2
  • 21
  • 40
  • I tried this in polyfills.ts for `require('smoothscroll-polyfill').polyfill();`, but I keep getting an error saying `D:/Projects/app/src/polyfills.ts (70,1): Cannot find name 'require'.`. Any idea how I might include this polyfill? – mtpultz Apr 21 '17 at 20:03
  • 1
    @mtpultz Currently, the polyfill.ts script has a commented out line with the proper import. – Mikayla Maki Jul 04 '17 at 05:19
  • This solution is currently not working for an angular 2 project. – Safal Pillai Jul 20 '17 at 09:05
  • Safal: I haven't had a chance to revisit this with a newer version of Angular and the CLI. Have you tried looking at the comments in polyfill.ts that Trenton and others have mentioned? – Carlos Mermingas Jul 20 '17 at 17:53
  • @CarlosMermingas Yes. I have imported 'web-animations-js/web-animations.min' inside polyfills.ts as mentioned in the answer. Still the animations are choppy in firefox. I have opened a new query about this [here](https://stackoverflow.com/questions/45210966/choppy-angular-2-animations-in-firefox-intergrating-web-animations-js-in-angula). – Safal Pillai Jul 21 '17 at 04:36
  • 1
    Just tried to replicate the issue in angular 4 with latest cli version with the same answer. Animation issue still persists. Is there any other step I'm missing? – Safal Pillai Jul 21 '17 at 05:19
  • 2
    @Safal my polyfill.ts generated by angular cli 1.2.6 contains this line:`// import 'web-animations-js'; ` So you need to replace require by import as mentioned by @Trenton – Loic T Aug 10 '17 at 13:14
  • @CarlosMermingas I am using webpack version of angular cli and I get SCRIPT5007: Object expected; web-animations.min.js (15,23868) error in IE9. Followed same steps. – Always_a_learner Aug 08 '18 at 08:24
15

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

Community
  • 1
  • 1
Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • Note: As far as I can tell the `ng update` logic doesn't currently remove this so you have to uninstall it yourself. – Simon_Weaver May 09 '18 at 01:54
  • Then why doesn't the animation function equivalent to Chrome on Safari? – Loveen Dyall May 23 '18 at 19:51
  • @LoveenDyall can you clarify what you mean. Is the animation not working on Safari or behaving differently? Or do you mean why did it ORIGINALLY not work - in which case it's probably just something to do with standards not having been implemented - but I don't really keep up with that and only do very basic animations. – Simon_Weaver May 24 '18 at 02:59
9

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.

Satyam
  • 703
  • 6
  • 20
dale
  • 1,258
  • 2
  • 17
  • 36
  • Dezza, I am using webpack version of angular cli/ angular4 and I get SCRIPT5007: Object expected; web-animations.min.js (15,23868) error in IE9. Followed same steps. – Always_a_learner Aug 08 '18 at 08:26
  • Not sure to be honest. Maybe try delete node_modules, 'npm cache clean --force', 'npm install' to reset everything – dale Aug 08 '18 at 12:23
2

I guess you have already done the most steps. Just to make it complete:

1) run npm install web-animations-js --save

2) add web-animation-js to angular-cli-build.js to make clear it is a vendor package:

return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
       ...
      'web-animations-js/**/*'
    ]
});

3) Configure system-js (system-config.ts)

/** Map relative paths to URLs. */
const map: any = {
  'web-animations-js': 'vendor/web-animations-js'
};

/** User packages configuration. */
const packages: any = {
  'web-animations-js': {main: 'web-animations.min.js'}
};

The main point here is that we need to tell system-js what the main file of this package is. System-js is not able to get this information from the package.json file - system-js expects the file is index.js. But it is not. It is web-animations.min.js.

4) In your main.ts file add:

import 'web-animations-js';

5) Stop and restart all processes that are using the angular-cli-build.js (ng server, ng test, etc).

Now system js will load the web-animation.js polyfill.

Carlos Mermingas
  • 3,822
  • 2
  • 21
  • 40
michael
  • 16,221
  • 7
  • 55
  • 60
  • Thank you for the detailed answer. I made the changes and I get a 404 error in the browser: `GET http://localhost:4200/vendor/web-animation-js/web-animations.min.js 404 (Not Found) Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/web-animation-js/web-animations.min.js ...` - There's a `vendor` directory in the project but `web-animations-js` is not in it (it's only in `node_modules`). – Carlos Mermingas Aug 09 '16 at 20:16
  • 1
    are you really sure you have done step 2? This makes sure that in your dist/vendor folder the web-animations folder is present. Also: you need to stop and start all processes that are using the angular-cli-build.js - ng server, ng test, ... – michael Aug 09 '16 at 21:08
  • Stopping and restarting the processes did the trick. Thank you very much! – Carlos Mermingas Aug 09 '16 at 21:37
  • i don't find the angulr-cli-build.js file, i have only the angular-cli.ts, where do i find it? If it is the same file, where do i have to add the vendorNpnFiles array? – mautrok Nov 14 '16 at 10:28
  • @mautrok I think this accepted answer is a little out of date as Angular-cli now uses webpack not system.js for builds. As below, you need to use npm to install it as a dependency and then import it into polyfills.ts That works a fine for me in real browsers, but currently causes errors using PhantomJS – Justin Grayston Jan 23 '17 at 09:40
2

I just did this with Visual Studio + gulp.

  1. Add this line to packages.json:

    "web-animations-js": "^2.2.2"

This will make sure that the package is downloaded to node_modules folder.

  1. Add this line to gulpfile.js in the gulp.src array:

    'web-animations-js/web-animations.min.js'

This will make sure that the file is copied into libs folder (or whatever you specified) during every gulp build.

  1. And this is how you import it in TypeScript:

    import 'libs/web-animations-js/web-animations.min.js';

PeterDeme
  • 31
  • 3
0

You can follow these 3 steps:

1- Run this command: npm i -D web-animations-js

2- Add these lines of codes to the "angular.json" file.

{
...
"projects:" {
  ...
  "architect": {
    ....
    "build": {
      ...
      "scripts": [
              {
                "input": "node_modules/web-animations-js/web-animations.min.js",
                "inject": false,
                "bundleName": "web-animations-js"
              }
            ],

Third, add these lines of codes to the "ployfills.ts" file.

if (!('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent))) {
  const script = document.createElement('script');
  script.src = 'web-animations-js.js';
  document.head.appendChild(script);
}

Note that I've surrounded the code in an if statement because this code will make an issue on old iOS devices usually in iPhone 6 with iOS 12

Kamran Taghaddos
  • 452
  • 1
  • 10
  • 22