How to use Snap.svg with Angular v4.0

Question

I don't know how to use snap.svg with Angular (created using angular-cli). I tried calling Snap.svg in index.html from the CDN, importing it into the component by adding: import 'snapsvg', but I always get this message:

Uncaught TypeError: cannot read the 'on' property from undefined

Any idea?

EDIT

Import:

import 'snapsvg'

Template:

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

In component:

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

Answer 1

First install snapsvg and its types:

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

Secondly, .angular-cli.jsonadd snap.svg-min.jsin scripts:

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

Now at the top of your component and immediately after import:

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

Then:

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

Answer 2

SnapSVG WebPack ( angular -cli). , , snapsvg.js script angular -cli.json. , :

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

Answer 3

snapsvg-cjs - SnapSVG CommonJS ( Webpack). googling https://github.com/stevefarwell/angular2-snapsvg-demo ( cli Angular 4)

Answer 4

1) - :

npm i imports-loader

2) - :

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