How to import the dymo.framework in Angular

Question

I am trying to import dymo.connect.framework into my Angular project. I'm trying to follow the SDK support of dymo. They only explain this for JavaScript. I also followed this explanation.

Unfortunately, there is not a lot information on this to be found yet. I downloaded their dymo.connect.framework.full.js from GitHub, and placed it inside my assets like this: assets/js/dymo/dymo.connect.framework.full.js.

Afterwards, I tried to import it in my component like this:

import "../../assets/js/dymo/dymo.connect.framework.full";

But I am unable to use it. How can I use this JavaScript asset inside my component.ts? How do I import it and declare it?

UPDATE: added the framework in my scripts from angular.json as suggested.

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
  {
    "input": "src/assets/js/dymo/dymo.connect.framework.full.js",
    "bundleName": "dymo"
  }
]

Answer 1

Use scripts section of angular.json. (See)

You will have to find corresponding d.ts file or create your own or just use as any:

window['dymo'].label.framework.init()

Answer 2

The dymo site is misleading. You will be lead to the SDK where you can find files. But the JS file there is corrupted. Don't use anything from the SDK. Use the the normal js (not the full) from here and follow those instructions. Add it like @kemsky says inside your scripts in the angular.json file.

Then you can declare it even more simply in the .ts file where you want to use it (I'm working with Angular 15) like this, right between your imports and where @Component starts:

declare var dymo:any;

You don't need ; in TypeScript. I just do it out of habit.