Cannot find name 'FontFace' when using Vexflow in Angular

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"]
  }
}