How to use verovio in Angular?

[ghost]

I took a look at PianoPlay which is an Angular app that uses verovio so I guess this can be done.
I just don't understand how to actually import verovio and create the verovio toolkit object.

I wrote the following angular service which is inspired by this service.

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

declare var verovio: any;

@Injectable({
  providedIn: 'root'
})
export class DocumentService {
  private vrvToolkit: any;

  constructor() {
    this.vrvToolkit = new verovio.toolkit();
    console.log(this.vrvToolkit);
  }
}

But when this code runs I get

because indeed the verovio variable is not initialized anywhere, it's just declared like in the aforementioned service.

I have installed verovio using npm install verovio.
ng version returns this:

Angular CLI: 17.0.6
Node: 20.10.0
Package Manager: npm 10.2.5
OS: win32 x64

Angular: 17.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.6
@angular-devkit/build-angular   17.0.6
@angular-devkit/core            17.0.6
@angular-devkit/schematics      17.0.6
@schematics/angular             17.0.6
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

How can I make verovio work with Angular?

[lpugin]

I am not sure if this can help, but @WolfgangDrescher put together some helpful examples for other frameworks. Maybe you can find there information on how it could work?

[WolfgangDrescher]

With Angular you probably want the ESM Version of Verovio. Keep in mind, that full ESM support is currently not possible due to some limitations with Emscripten. But depending on your bundler you can get around this.

Here is the link to my Vue.js implementation: https://github.com/WolfgangDrescher/vue-verovio-canvas

Your code should look similar to this:

import createVerovioModule from 'verovio/wasm';
import { VerovioToolkit } from 'verovio/esm';

createVerovioModule().then(VerovioModule => {
    const toolkit = new VerovioToolkit(VerovioModule);
    toolkit.loadData(...);
    const svg = toolkit.renderToSVG();
});

If you use Vite as a bundler you will have to use:

export default defineConfig({
    optimizeDeps: {
        exclude: ['verovio'],
    },
});

---

Specifically on PianoPlay it looks like Verovio is added as a global variable (which is not the best solution in in my opinion):

https://github.com/search?q=repo%3Adeanmalone%2FPianoPlay+verovio&type=code

https://github.com/deanmalone/PianoPlay/blob/a458be313b8f5ae49faa3a5965c68d0a4a688256/angular.json#L30

https://github.com/deanmalone/PianoPlay/blob/a458be313b8f5ae49faa3a5965c68d0a4a688256/src/app/notation/notation.service.ts#L5