Cannot find name 'FontFace' when using Vexflow in Angular - node.js

Question

Im having trouble when trying to integrate VexFlow in my Angular 12 project.
First I installed the library using:
npm install vexflow
Then I created a simple component and simply used the native api example from the documentation to try out the library. Here is the component:
import {AfterViewInit, Component, ElementRef, OnInit} from '#angular/core';
import {Renderer, Stave} from "vexflow";
#Component({
selector: 'app-note-display',
templateUrl: './note-display.component.html',
styleUrls: ['./note-display.component.scss']
})
export class NoteDisplayComponent implements OnInit, AfterViewInit {
constructor(private elRef: ElementRef) { }
ngOnInit(): void {
}
ngAfterViewInit() {
const renderer = new Renderer(this.elRef.nativeElement.querySelector('#note-display'), Renderer.Backends.SVG);
// Configure the rendering context.
renderer.resize(500, 500);
const context = renderer.getContext();
// Create a stave of width 400 at position 10, 40.
const stave = new Stave(10, 40, 400);
// Add a clef and time signature.
stave.addClef('treble').addTimeSignature('4/4');
// Connect it to the rendering context and draw!
stave.setContext(context).draw();
}
}
But Im getting the following error when serving my application:
Error: node_modules/vexflow/build/types/src/font.d.ts:132:92 - error TS2304: Cannot find name 'FontFace'.
132 static loadWebFont(fontName: string, woffURL: string, includeWoff2?: boolean): Promise<FontFace>;
I tried this solution from another question, but it was not helpful in my case.

Answer 1

As the other solution suggest, #types/css-font-loading-module is probably what you need.
Install it with npm i -D #types/css-font-loading-module and make sure that it is included in your tsconfig.json.
It must be added to the types field, it should like similar to this:
{
"compilerOptions": {
/* other compiler options... */
"types": ["css-font-loading-module"]
}
}