使用角度为 6 的tone.js

Question

我正在尝试以 Angular 6 导入tone.js。正如tone.js 安装doc 中提到的，我安装了tone.js。

npm - npm install tone

我尝试在 app.module.ts 中导入 Tone

import { ToneJs } from 'tone';
imports: [
   ToneJs,
   ...
]

我遇到了这个异常：

Error: Unexpected value 'undefined' imported by the module 'AppModule'

如何导入和使用带有 angular 的tone.js？

这是我的角度版本

ng -v
Angular CLI: 6.0.1
Node: 8.11.1
OS: darwin x64
Angular: 6.0.1

编辑：

当我尝试将其加载到组件中时

import { Component } from '@angular/core';
import { ToneJs } from 'tone';
@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.css']
})
export class PlayerComponent {  
    constructor(private toneJs: toneJs) { }
}

我明白了：

Error: Can't resolve all parameters for PlayerComponent: (?).

Answer 1

今天早上我在谷歌上搜索这个主题时发现了一个名叫Dylan Lawrence 的人创建了a nice starter。超级有用！

Answer 2

如果您使用 angular-cli，您可以尝试将 ToneJS 库作为外部脚本添加到您的 angular.json 中

projects
- architect
  - build
    - scripts
      - [ ..., "node_modules/path/to/Tone.js"]

如果您在 src/typings.d.ts 中没有 typings.d.ts 文件，请创建此文件并添加此行 declare var Tone: any;

现在，您应该可以在整个应用程序中使用 ToneJs 作为全局变量。所以你可以这样使用它：

import { Component } from '@angular/core';

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.css']
})
export class PlayerComponent {  
    constructor() { 
        // const loop = new Tone.Loop((time) => { 
            // do something 
        }
    }
}