Snap SVG with Angular 2

[Andrea Mercieca]

IDE: VS2015 CE

Language: Typescript 2

I've installed Snap SVG using NPM by adding the following line to the package.json

"snapsvg": "^0.4.0",

I've also installed the typings using

typings install dt~snapsvg -G

Now I'm trying to create a new Angular 2 component and importing the snapsvg library using

import * as snap from 'snapsvg'

However the IDE is producing an error stating "Cannot find module snapsvg". Can someone please point out what I'm missing?

Thanks!

[e...@estebanpadilla.com]

Any luck with adding it to angular 2 project?

[Andrea Mercieca]

Unfortunately no, I never managed to include it as a module. What I did was use the typings of snagsvg directly in the ng2 controller, and added the reference to the snapsvg js file in index.html. This bypasses the whole angular dependency injection framework and the SnapSVG JS file is downloaded as soon as the page is loaded (leading to longer load times) -- but since I'm working on a Single Page Application, I can tolerate it being loaded immediately.

I'm sure there's a way to wrap the snapsvg into an Angular module, but I'm new to NG2 (and Angular in general), so I need more time to learn how.

[Pramod Patidar]

tried with angular-cli: 1.0.0-beta.19-3 and if you add snap.svg.js in angular-cli.json like below you can at least avoid adding it in index.html.

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

[Andrea Mercieca]

Thanks for the tip. I'll try it out (since I wasn't using angular-cli) when I've got some time and revert back to you with the results.