How to import javascript file into angular4 project and use it's function inside component?

Question

I am trying to import openseadragon.min.js file in index.html and using it's function like below,

var viewer = OpenSeadragon({
  id: "seadragon-viewer"
});

But it is throwing error like OpenSeadragon is undefined.

Any solutions will be appreciated, Thank you

Answer 1

Try declaring the variable at the top of your component immediately below your imports, not inside your class export statement.

import { Component } from '@angular/core';

declare var OpenSeadragon: any;

@Component({
...
})

Answer 2

You need angular typings to do this correctly for OpenSeadragon. You also shouldn't be using vars in typescript as it breaks context and causes scope and hoisting issues.

Please see https://github.com/alvaromartmart/types-openseadragon for typings