Annotorious.ShapeLabelsFormatter is not a function Angular 11

[adnanrafique]

Hello,

I have implemented the Annotorious in my Angular 11 Project and it has been working perfectly fine. Now I need to implement the annotorious-shape-labels.

What I did,

1. Installed it using NPM (I can see it in the node_modules now)
2. Imported the annotorious-shape-labels.min.js inside my angular.json scripts just like I did for annotorious

          "node_modules/@recogito/annotorious/dist/annotorious.min.js",
          "node_modules/@recogito/annotorious-shape-labels/dist/annotorious-shape-labels.min.js"

3. Defined formatter while initialising the Annotorious

             const anno = new Annotorious({
                image: image_path,
                widgets: ['COMMENT', 'TAG],
                formatter: Annotorious.ShapeLabelsFormatter()
             });

   I am getting the following error and cannot make it to work

I have also tried importing the javascript file inside index.html and If I see page source, I can see the js loaded from CDN. Please help me understand what could be wrong.

[rsimon]

Hi, sorry - on the road right now. But I think it should (fingers crossed...) work if you import and use like this:

import ShapeLabelsFormatter from '@recogito/annotorious-shape-labels';

and then:

const anno = new Annotorious({
  image: image_path,
  widgets: ['COMMENT', 'TAG],
  formatter: ShapeLabelsFormatter()
});

The global Annotorious "namespace in Annotorious.ShapeLabelsFormatter is only available in case of script imports. Using the ShapeLabelsFormatter import directly should work in your case. (As I said: fingers crossed. Haven't tested myself now.)

[adnanrafique]

Worked like a charm. Thank you @rsimon. You are amazing and please drive safe.

[rsimon]

That sounds like you imported

import { ShapeLabelsFormatter } from '@recogito/annotorious-shape-labels';

not

import ShapeLabelsFormatter from '@recogito/annotorious-shape-labels';

If that doesn't work, can you try this?

import * as ShapeLabelsFormatter from '@recogito/annotorious-shape-labels';

And if that doesn't work: I'll need to dig deeper ;-) (Probably later today.)

[rsimon]

Ah, sorry - just saw your comment. Good to hear it works!