Comment utiliser Snap.svg avec Angular v4.0

Question

Je ne sais pas comment utiliser snap.svg avec Angular (créé avec angular-cli). J'ai essayé d'appeler Snap.svg dans l'index.html avec CDN, de l'importer dans le composant en ajoutant : import 'snapsvg' mais j'obtiens toujours ce message :

Erreur de Type Non Rattrapée : Impossible de lire la propriété 'on' d'undefined.

Une idée ?

EDIT

Importation :

import 'snapsvg'

Modèle :

<svg id="test" width="100%" height="100%" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
  <path d="M84.403,145.423c65.672,64.179 136.318,0 136.318,0" />
</svg>

Dans le composant :

  ngOnInit() {
    let s = Snap('#test')
    this.path = s.path(this.start)
    this.path.animate({
      d: this.end
    }, 1000, mina.bounce)
  }

Answer 1

Commencez par installer snapsvg et ses types :

npm install --save snapsvg
npm install --save @types/snapsvg

Ensuite, dans .angular-cli.json ajouter snap.svg-min.js a scripts :

"scripts": [
  "../node_modules/snapsvg/dist/snap.svg-min.js"
]

Maintenant, en haut de votre composant et juste après les importations :

declare var Snap: any;
declare var mina: any;    // if you want to use animations of course

Ensuite :

ngOnInit() {
  const s = Snap('#my-svg');
  const c = s.circle(50, 50, 100);
}

Answer 2

Actuellement, il semble y avoir un bug avec l'utilisation de SnapSVG avec WebPack (que angular-cli utilise). Jusqu'à présent, le seul moyen que j'ai trouvé pour que cela fonctionne est d'inclure le fichier snapsvg.js comme un script dans angular-cli.json . Ajoutez-le au tableau script comme ci-dessous :

"scripts": [ "node_modules/snapsvg/dist/snap.svg.js"],

Answer 3

Vous pouvez essayer d'utiliser snapsvg-cjs - SnapSVG dans CommonJS (pour Webpack). Une simple recherche sur Google m'a conduit à cette démo. https://github.com/stevefarwell/angular2-snapsvg-demo (il utilise cli et Angular 4)

Answer 4

1) Installer imports-loader et snap :

npm i imports-loader

2) Utilisez imports-load pour importer :

import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js';