Angular 15 import

[Edo2610]

I have to use Annotorious on angular 15 using these versions:

"openseadragon": "^4.1.0",
"@recogito/annotorious-openseadragon": "^2.7.10"

and when I develop I not have any problem with Annotorious plugin, it works perfectly!
When I build my angular app and I deploy it, I get this error when I use Annotorious constructor

that correspond at this line of code this.annotorious = Annotorious(this.viewer, this.annoOptions);

Does anyone have a solution?

N.B. I try to import in two way and I still always have the same problem:

• import * as Annotorious from '@recogito/annotorious-openseadragon';
• import * as Annotorious from 'assets/script/openseadragon/openseadragon-annotorious';

[Edo2610]

[RESOLVED]

Seraching on the source code I suppose that something is wrong in the way that I use to import the library.
Following the official Getting Started guide

I get the error.
Importing the library in this way import OSDAnnotorious from '@recogito/annotorious-openseadragon'; and using the constructor OSDAnnotorious instead of Annotorious all works well also during deploy and in prod mode!!

[Edo2610]

@rsimon pheraphs the Getting Started guide can be fixed and also an option that creates a definitions file (.d.ts) can be added during build to not incur in this errors!

[lumalav]

[RESOLVED]

Seraching on the source code I suppose that something is wrong in the way that I use to import the library. Following the official Getting Started guide

I get the error. Importing the library in this way import OSDAnnotorious from '@recogito/annotorious-openseadragon';` all works well also during deploy and in prod mode!!

Hey! I am trying your solution and its not working for me... its throwing a annotorious_openseadragon_1.default is not a constructor

Is there a way that you could help me here in this stackblitz?

Thanks!

[Edo2610]

The problem is that you are using annotorious plugin for osd but the img is not loaded with osd.
Anyway not only the import is OSDAnnotorious but also the contructor. I edited my solution upper!

Check this example

[lumalav]

@Edo2610 Awesome! thanks so much man.

[niyato]

It's okay to hold down the mouse and drag to draw a rectangle, but what happens when you can't draw a label after just one click

[rsimon]

Concerning Angular integration: I'm reposting from a similar issue here:

If anyone is still listening on this issue: the next major release of Annotorious is getting closer to release-ready. It's a complete re-write, and I believe that it will make integration with different frameworks much easier.

As of now, v3 has practically no documentation, and it doesn't have feature parity with v2.7. (Most importantly, it's headless mode only for now.) But if anyone wants to look: I believe it will solve a lot of the tedious interoperability issues that you are facing.

As written above, I'm not an Angular person. Which means I can still not give any advice. But if you look at how integration is done for React and Svelte, you might find some inspiration on how to do it for Angular.

• v3 is now a separate branch in this repository. Minimal documentation is in the Readme.
• For reference & inspiration: the @annotorious/react bindings module is here.
• The @annotorious/svelte bindings are here