11

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

Uncaught TypeError: Cannot read property 'on' of 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)
  }
Swarovski
  • 581
  • 2
  • 8
  • 25
  • I would include some code. Make sure you are using an svg element not a div element when setting Snap up. – Ian Mar 28 '17 at 14:42
  • Hi I've updated my message with some code – Swarovski Mar 29 '17 at 20:07
  • Can you console.log(Snap, this.path,s) after the let s = Snap(..) bit. Don't need to include all the code if it returns lots of it, just one line to give a clue what it thinks Snap is, and then this.start and s. Also take a look at using the code in ngAfterViewInit() (sorry I'm not very familiar with Angular) – Ian Mar 29 '17 at 20:16
  • Nothing more than "Cannot read property 'on' of undefined". Because the error come when Snap is loading. – Swarovski Mar 29 '17 at 20:54

4 Answers4

25

First install snapsvg and its types:

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

Secondly in .angular-cli.json add snap.svg-min.js to scripts:

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

Now at the top of your component and just after the imports:

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);
}
moeabdol
  • 4,779
  • 6
  • 44
  • 43
2

Currently there seems to be a bug with using SnapSVG with WebPack (which angular-cli uses). So far the only way I've got this to work is by including the snapsvg.js file as a script in angular-cli.json . Add this to the scripts array as below: 

"scripts": [ "node_modules/snapsvg/dist/snap.svg.js"],
Ramishka Dasanayaka
  • 330
  • 1
  • 3
  • 8
  • 1
    Thank you but that's not working. I've created new project with angular-cli, added snapsvg package with npm and the path to this module like you recommend. I've imported snapsvg in app.component.ts and added the same code as in my initial post... with that, I get no error in the terminal but my IDE tell me : "Cannot find name 'Snap'", if I import snapsvg with : "import * as Snap from 'snapsvg', I get : "Uncaught TypeError: Cannot read property 'on' of undefined". It's working with snapsvg-cjs, but the rendering is not the same and some functionnality doesn't work... – Swarovski Apr 02 '17 at 10:25
0

You can try using snapsvg-cjs - SnapSVG in CommonJS (for Webpack). Simple googling got me to this demo https://github.com/stevefarwell/angular2-snapsvg-demo (it uses cli and Angular 4)

Chyngyz
  • 198
  • 1
  • 8
0

1) Install imports-loader and snap:

npm i imports-loader

2) Use imports-load to import:

import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js';
Jojo.Lechelt
  • 1,259
  • 12
  • 15