Using external typings

I am moving on to Ionic2 and are trying to get a grasp on how to use external libraries.

In this example, I am trying to use the Vivus library, animating SVGs. I have installed the library and the typings using NPM. However, I cannot figure out how to actually use it.

I am importing it like this: import {Vivus} from 'vivus'; but are getting the error

Module ‘"/Users/patrick/www/ionic2app/node_modules/@types/vivus/index"’ has no exported member ‘Vivus’.

Looking at the lines 6-7 in the screenshot below, I would expect it to work.

What am I doing wrong?

1 Like

import * as Vivus from 'vivus'; did the trick.

@Reck

I am also trying Vivus and Ionic2.
I get this error:

Runtime Error
Failed to read the ‘contentDocument’ property from ‘HTMLObjectElement’: Blocked a frame with origin “http://localhost:8100” from accessing a cross-origin frame.

ts file has:

ionViewWillEnter() {
console.log(“ionViewWillEnter - This function will be called every time you enter the view”);
new Vivus(“aeicon”, {duration: 200, file: ‘assets/svg/aeicon.svg’}, this.ionViewWillEnter);
}

html file has:

<div id="aeicon"></div>

I guess I am not calling the library correctly and would
appreciate any pointers if you got it working.

One thing you could try is switching from using a file: URL to a data: one.