在角中使用Vexflow时无法找到名称“FontFace”

Question

当我试图将VexFlow集成到我的VexFlow 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和安装它，确保它包含在您的中。

必须将它添加到types字段中，它应该类似于以下内容：

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