ng 构建错误 - 属性“requestMIDIAccess”不存在答案

【问题标题】：ng build error - Property 'requestMIDIAccess' does not existng 构建错误 - 属性“requestMIDIAccess”不存在
【发布时间】：2017-03-29 09:25:13
【问题描述】：

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

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

保释模式错误：[默认] /Users/JmsToh/GitHub/web-editor/web-editor/src/app/midi.service.ts:43:22 “Navigator”类型上不存在属性“requestMIDIAccess”。

这来自这部分代码：

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在构建时忽略错误？

【问题讨论】：

标签： angular

【解决方案1】：

添加necessary type definitions 使用：

npm install @types/webmidi

重启后应该会自动发现tsc。

注意：如果在安装库后您看到错误“找不到名称Map”，请参阅this answer。

【讨论】：

【解决方案2】：

好的，我设法通过这样做来消除此错误：

navigator["requestMIDIAccess"]

【讨论】：

【解决方案3】：

安装 @types/webmidi 让我可以使用定义并让 vs 代码工作，但这还不足以编译。

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

【讨论】：

它对我有用，对于 Angular 6+ 项目，您必须将其添加到 tsconfig.app.json 中。

【解决方案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.');
}

【讨论】：