Inject built-in JavaScript class in Angular 2

Question

I'm trying to make a class that is built into JavaScript, injectable in an Angular 2 app. For my particular use case I am trying to inject an instance of AudioContext. I've tried making it injectable the following 4 ways but none of them work

@NgModule({
    providers: [
        AudioContext
        //{provide: AudioContext, useClass: AudioContext}
        //{provide: AudioContext, useValue: new AudioContext()}
        //{provide: AudioContext, useFactory: () => new AudioContext()}
    ]
})

export class AppModule {

}

I get the error

Error encountered resolving symbol values statically. Could not resolve type AudioContext (position 13:39 in the original .ts file)

How can I make an instance of AudioContext injectable across my application without wrapping it in a custom service?

I think you have to do something absolutely arbitrarily stupid like create a file like `audio-context.ts` with contents like `export const audioContext = new AudioContext();` and then import it into your module. — Aluan Haddad, Jan 02 '17 at 19:05
@AluanHaddad that sounds like it would work. Although it might make unit testing tricky if objects like this aren't coming through Angular's DI — rob, Jan 02 '17 at 19:10
No it still would come from DI, you would put it in the providers array. The AOT compiler is completely boneheaded and doesn't understand basic concepts like functions. — Aluan Haddad, Jan 02 '17 at 19:11
Specifically, it doesn't understand this basic syntax `{provide: AudioContext, useFactory: () => new AudioContext()}`. — Aluan Haddad, Jan 02 '17 at 19:12
@AluanHaddad ah ok I'll see if I can get something like that working — rob, Jan 02 '17 at 19:18

score 0 · Answer 1 · edited May 23 '17 at 12:17

0

Audio context is available on the global window object, inject window object as a provider.

var AudioContext = window.AudioContext || window.webkitAudioContext;

Angular2 - How to inject window into an angular2 service

Then you can access AudioContext through the injected Window object.

edited May 23 '17 at 12:17

Community

1
1

answered Jan 02 '17 at 18:56

Chirdeep Tomar

4,281
8
37
66

I want to inject an instance of AudioContext not the class – rob Jan 02 '17 at 18:59
Don't inject window that is a terrible idea. – Aluan Haddad Jan 02 '17 at 19:01
@AluanHaddad Injecting a window is not a terrible idea, using global object and attaching everything to it is. You are welcome to have a disagreement. Rob create a provider that wraps over AudioContext then and set that as a provider. – Chirdeep Tomar Jan 02 '17 at 19:04
I'd like to avoid creating a custom service that wraps AudioContext if possible. Is it not possible to inject AudioContext directly? – rob Jan 02 '17 at 19:19
No its not as AudioContext is not an Angular Module or Provider provided by Angular. Wrapping it over is making it an Angular module, something that Angular then understands and be available for injection. – Chirdeep Tomar Jan 02 '17 at 19:25
Injecting window as a terrible idea because window has too many responsibilities and is too complex. The implementation may come to rely hanus fix a window that are not relevant. I think creating a wrapper is a fine idea. – Aluan Haddad Jan 06 '17 at 05:41

Inject built-in JavaScript class in Angular 2

1 Answers1