找不到名称＆＃x27; fontface＆＃x27;在角度使用vexflow

Question

我在尝试将Vexflow集成到我的Angular 12项目中时遇到了麻烦。

首先，我使用以下方式安装了库：

npm install vexflow

然后我创建了一个简单的组件，然后简单地使用本地API示例试用库的文档。这是一个组件：

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();
  }

}

但是，在服务我的应用程序时，我会遇到以下错误：

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>;

我尝试了此解决方案>解决方案在我的情况下没有帮助。

Answer 1

正如其他解决方案所建议的那样，@types/css-font-loading-module可能是您需要的。
使用NPM I -D @types/css-font-loading-module和确保它包含在您的tsconfig.json 中。
必须将其添加到类型字段中，它应该喜欢与此类似：

{
  "compilerOptions": {
    /* other compiler options... */
    "types": ["css-font-loading-module"]
  }
}