3

I am using the JavaScript library OpenSeadragon in an Angular 8 app. So the common way is to register the javascript.min.js file in the angular.json scripts section and use it in TypeScript the following way:

declare var OpenSeadragon: any;

Then I can use the OpenSeadragon in my TypeScript component like this:

const test: any = OpenSeadragon({});

So, that is working.

For this library there are several plugins/extensions. I need to use some of these plugins. They depend on importing the main/core library. So I am adding the plugin's js file in the angular.json scripts section too.

"scripts": [
  "./node_modules/openseadragon/build/openseadragon/openseadragon.min.js",       
  "./node_modules/openseadragonselection/dist/openseadragonselection.js"
]

The structure of these plugins is that they are extending the core functionality in the following way:

    $.Viewer.prototype.selection = function(options) {
        if (!this.selectionInstance || options) {
            options = options || {};
            options.viewer = this;
            this.selectionInstance = new $.Selection(options);
        }
        return this.selectionInstance;
    };

For a Viewer object/instance from the main-lib they are introducing a new method called selection({withOptions})

The problem is how can I access the new method in my Angular TypeScript component too? Currently I am getting the error that the method selection does not exist.

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
ArgV
  • 175
  • 3
  • 13

2 Answers2

0

You can try to change the any value in your declaration and add a specific type or you can add something like this:

declare global {
  interface OpenSeadragon {
    selection: (options:any) => any;
  }
}
tasos
  • 369
  • 1
  • 9
  • This does not help :/ the problem ```selection is not a function``` .... looks like that the js-plugin-file get not loaded or extends the core js-file? – ArgV Sep 12 '19 at 12:57
  • Oh, I see. Can you ensure that the `openseadragonselection.js` file is loaded and in the correct order? From the `selection is not a function` error I can understand that this is not happening. – tasos Sep 12 '19 at 13:07
  • I added both js-files in the angular.json scripts-block and I see them that they are loaded but yes a good question is how they are ordered because I see an other error log before `Uncaught ReferenceError: require is not defined `... so in the js-file-extension is see the require statement pointing to have the core lib loaded before ... – ArgV Sep 12 '19 at 13:30
  • I think that this `require` shouldn't be there. It is a Nodejs API. I noticed that in github (https://github.com/picturae/openseadragonselection/tree/master/dist) the dist folder has different files. I suggest to download and try them or better try a previous version of this module `npm install openseadragonselection@1.7.0` – tasos Sep 13 '19 at 08:56
0

Remove ./ from path

path should be like this

"node_modules/openseadragon/build/openseadragon/openseadragon.min.js", "node_modules/openseadragon-annotations/dist/openseadragon-annotations.js",

Community
  • 1
  • 1
Tushar Khairnar
  • 29
  • 9