web-dev-qa-db-fra.com

Comment ajouter un polyfill API Web Animations à un projet Angular 2 créé avec Angular CLI

Le documentation des animations Angular 2 fait référence au polyfill API Web Animations pour les navigateurs qui ne prennent pas en charge le natif.

Quelle est la manière appropriée d'ajouter ce polyfill à un projet Angular 2 créé avec Angular CLI?

(J'utilise angular-cli: 1.0.0-beta.10)

Sans succès, j'ai essayé les idées et les solutions mentionnées ici:

Je l'ai téléchargé via NPM et l'ai ajouté à system-config.ts. Je crois que c'est dans le sens de ce qui est recommandé mais le polyfill ne se charge pas (je peux le dire parce que les animations ne fonctionnent pas dans Safari).

Je n'ai réussi à faire fonctionner cela qu'en incluant le polyfill dans index.html, Je sais que ce n'est pas la bonne façon:

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

Je vais ajouter ici tous les détails qui pourraient aider à clarifier ma question, mais si vous avez besoin de voir le code, je l'ai sur Github:

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

Merci d'avance!

angularangular-cli
18
Carlos Mermingas

Angular 6 Note - Polyfill n'est plus nécessaire :-)

Améliorations des performances des animations

Nous avons mis à jour notre implémentation d'Animations pour ne plus avoir besoin du polyfill d'animations Web. Cela signifie que vous pouvez supprimer ce polyfill de votre application et enregistrer environ 47 Ko de taille de bundle, tout en augmentant les performances des animations dans Safari en même temps.

:-)

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

13
Simon_Weaver

Ajouter le polyfill avec la nouvelle version Webpack de Angular CLI est plus facile:

  1. Installez avec npm install web-animations-js --save

  2. Ajouter à polyfills.ts: require('web-animations-js/web-animations.min');

Cela a également fonctionné si je le fais import 'web-animations-js/web-animations.min';

38
Carlos Mermingas

Dans Angular 4, suivez simplement les étapes ci-dessous:

  1. ajoutez web-animations-js comme dépendance:

    npm installe web-animations-js

  2. Et décommentez la ligne suivante dans polyfils.ts

    importez 'web-animations-js'; // Courir npm install --save web-animations-js.

9
dale

Je suppose que vous avez déjà fait le plus d'étapes. Juste pour le compléter:

1) Exécutez npm install web-animations-js --save

2) ajoutez web-animation-js à angular-cli-build.js pour indiquer clairement qu'il s'agit d'un package fournisseur:

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

3) Configurer 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'}
};

Le point principal ici est que nous devons dire à system-js quel est le fichier principal de ce paquet. System-js n'est pas en mesure d'obtenir ces informations à partir du fichier package.json - system-js s'attend à ce que le fichier soit index.js. Mais ce n'est pas. C'est web-animations.min.js.

4) Dans votre fichier main.ts, ajoutez:

import 'web-animations-js';

5) Arrêtez et redémarrez tous les processus qui utilisent angular-cli-build.js (serveur ng, test ng, etc.).

Maintenant, le système js chargera le polyfill web-animation.js.

2
michael

Je viens de le faire avec Visual Studio + gulp.

  1. Ajoutez cette ligne à packages.json:

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

Cela garantira que le package est téléchargé dans le dossier node_modules.

  1. Ajoutez cette ligne à gulpfile.js dans le tableau gulp.src:

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

Cela garantira que le fichier est copié dans le dossier libs (ou tout ce que vous avez spécifié) lors de chaque génération de gulp.

  1. Et voici comment vous l'importez en TypeScript:

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

2
PeterDeme