ng build 错误 - 属性 'requestMIDIAccess' 不存在

Question

我正在尝试构建一个Angular2项目，使用Web Midi API。

运行ng build时，由于抛出了某些错误，我无法完成该过程，具体来说：

Error in bail mode: [default] /Users/JmsToh/GitHub/web-editor/web-editor/src/app/midi.service.ts:43:22 
Property 'requestMIDIAccess' does not exist on type 'Navigator'.

这是代码的以下部分引起的：

if (navigator.requestMIDIAccess) {
  this.browserMidiCompatible = true;
  navigator.requestMIDIAccess({ sysex: false })
    .then(this.onMIDISuccess.bind(this), this.onMIDIReject.bind(this));
} else {
  alert("Platform not compatible");
}

在运行ng serve时，这个应用程序在Chrome上运行良好。是否有任何方式可以让Angular2在构建时忽略错误?

- jmstoh

Answer 1

使用以下方式添加必要的类型定义：

npm install @types/webmidi

重新启动tsc后，它们应该能够被自动发现。

注意：如果在安装库后看到“找不到名称为Map”的错误，请参考此答案。

- Kos

Answer 2

好的，我通过以下方法成功解决了这个错误：

navigator["requestMIDIAccess"]

注：这段代码涉及IT技术，意为“请求MIDI访问权限”。

- jmstoh

Answer 3

安装@types/webmidi使我能够使用定义并让VS Code工作，但这对编译来说不够。

我通过在我的tsconfig中添加以下编译器选项来解决此问题： "types": ["webmidi"]

- dc-p8

---

对我来说有效，对于 Angular 6+ 项目，您需要将其添加到 tsconfig.app.json 中。 - runit

Answer 4

使用npm install -s @types/webmidi命令进行安装，Angular 7可以通过以下源代码使用它：

const requestMIDIAccess = navigator['requestMIDIAccess'];
if (requestMIDIAccess) {
  requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
  console.log('This browser supports WebMIDI!');
} else {
  console.log('WebMIDI is not supported in this browser.');
}

- Stephane