using tone.js within angular6

Question

I'm trying to import tone.js in angular 6. As mention in tone.js installation doc, I installed tone.js.

npm - npm install tone

I tried to import Tone in app.module.ts

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

I got this exception:

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

How I can import and use tone.js with angular?

Here my angular version

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

Edit:

When I try to load it in a component

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) { }
}

I get:

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

Answer 1

If you are using angular-cli, you could try adding the ToneJS library to your angular.json as an external script

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

if you dont have a typings.d.ts file at src/typings.d.ts, create this file and add this line declare var Tone: any;

Now, ToneJs should be available for you to use throughout the app as a Global variable. So you can use it like this:

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

Answer 2

Someone named Dylan Lawrence created a nice starter I found while googling on this topic this morning. Super helpful!