Angular2 - List of providers as a constant not working

Question

I'm trying to created a wrapper for the XHRBackend class and I've been able to successfully create and use all the provided services in my outermost AppComponent but I can't package the providers in the actual service itself. I am injecting the class into the components constructor but I can't imagine that would break anything.

Current AppComponent code:

import {HTTP_PROVIDERS, Http, ConnectionBackend, RequestOptions} from "@angular/http";
import {ROUTER_DIRECTIVES} from "@angular/router";
import {XHRBackendWrapper} from 'backendwrapper.services';

@Component({
    selector: 'app',
    template: './app.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [
        HTTP_PROVIDERS,
        provide(Http, {
            useFactory: (xhrBackend: ConnectionBackend, requestOptions: RequestOptions) => new Http(xhrBackend, requestOptions),
            deps: [XHRBackendWrapper, RequestOptions]
        }),
        XHRBackendWrapper
    ]
})
export class AppComponent {
     constructor(xhrBackend: XHRBackendWrapper){
    }
}

Desired AppComponent code:

import {HTTP_PROVIDERS} from "@angular/http";
import {ROUTER_DIRECTIVES} from "@angular/router";
import {BACKEND_PROVIDERS, XHRBackendWrapper} from 'backendwrapper.services';

@Component({
    selector: 'app',
    template: './app.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [
        HTTP_PROVIDERS,
        /** THIS IS THE ONLY DIFFERENCE HERE!!! ***/
        BACKEND_PROVIDERS
    ]
})
export class AppComponent {
     constructor(xhrBackend: XHRBackendWrapper){
    }
}

Desired exported constant from the backend wrapper:

export const BACKEND_PROVIDERS = [
    provide(Http, {
        useFactory: (xhrBackend: ConnectionBackend, requestOptions: RequestOptions) => new Http(xhrBackend, requestOptions),
        deps: [XHRBackendWrapper, RequestOptions]
    }),
    XHRBackendWrapper
];

When I try to do this I get a One or more of providers for "AppComponent" were not defined error that appears in my console because the XHRBackendWrapper cannot be found. What am I missing here?

I can't post all of the code because it would make this question far too large but, if it helps, this is the general idea for the XHRBackendWrapper:

@Injectable()
export class XHRBackendWrapper extends ConnectionBackend {
    constructor(private _xhrBackend: XHRBackend)
    {
        super();
    }

    createConnection(request: Request)
    {
        return this._xhrBackend.createConnection(request);
    }
}

score 0 · Answer 1 · answered Jul 14 '16 at 14:15

0

Not completly sure, but you might need to destructure your BACKEND_PROVIDERS like this:

providers: [
    ...HTTP_PROVIDERS,
    /** THIS IS THE ONLY DIFFERENCE HERE!!! ***/
    ...BACKEND_PROVIDERS
]

answered Jul 14 '16 at 14:15

Sam Vloeberghs

1,082
5
18
29

Angular2 - List of providers as a constant not working

1 Answers1