ConnectionBackend not working in angular 2 release? How do I provide XHRBackend?

Question

TypeProvider ConnectionBackend is no longer working after upgrading from Angular 2.0.0-rc.5 to 2.0.0.

When I put it in my list of providers. I get this error from Visual studio code.

[ts] Argument of type '{ bootstrap: typeof AppComponent[]; declarations: (typeof LoginComponent | typeof EmailLoginCompo...' is not assignable to parameter of type 'NgModule'. Types of property 'providers' are incompatible. Type '(any[] | typeof HttpModule | typeof Location | typeof AuthStore | typeof RequestInterceptor | typ...' is not assignable to type '(TypeProvider | ValueProvider | ClassProvider | ExistingProvider | FactoryProvider | any[])[]'. Type 'any[] | typeof HttpModule | typeof Location | typeof AuthStore | typeof RequestInterceptor | type...' is not assignable to type 'TypeProvider | ValueProvider | ClassProvider | ExistingProvider | FactoryProvider | any[]'. Type 'typeof ConnectionBackend' is not assignable to type 'TypeProvider | ValueProvider | ClassProvider | ExistingProvider | FactoryProvider | any[]'. Type 'typeof ConnectionBackend' is not assignable to type 'any[]'. Property 'push' is missing in type 'typeof ConnectionBackend'.

I have looked at the changelog and I don't see anything that applies here. I did notice that, for example HTTP_PROVIDERS had been replaced with HttpModule, but that was in the changelog and the entire reference was missing. This is much stranger.

What am I meant to use in the release version of angular 2 to provide a XHRBackend?

This is a sort of appendix, of all the code concerned. The question part has finished already:

Here is my NGModule. My app runs fine (except for breaking when it needs to provide the Http object) with the ConnectionBackend line commented out.

    @NgModule({
      bootstrap: [ AppComponent ],
      declarations: [
        AppComponent,
        LoginComponent,
        EmailLoginComponent,
        EmailLoginCodeComponent,
        ErrorComponent,
        ExampleComponent,
      ],
      imports: [
        BrowserModule,
        routing,
      ],
      providers: [
        appRoutingProviders,
        HttpModule,
        Location,
        AuthStore,
        RequestInterceptor,
        ResponseInterceptor,
        ConnectionBackend, // THIS IS THE PROBLEM LINE
        {
            provide: Config,
            deps: [XHRBackend, RequestOptions],
            useFactory: (
                backend: XHRBackend,
                defaultOptions: RequestOptions
                ) => {
                    let config = new Config(new Http(backend, defaultOptions));
                    // I hope this promise finishes
                    let promise: Promise<Config> = config.load().then( response => config);
                    return config;
                },
        },
        {
            provide: PanelGuidStore,
            useFactory: (
                () =>
                    new PanelGuidStore()
                ),
        },
        Locator,
        {
            provide: AuthService,
            // Factory for AuthService
            // use standard http here to avoid circular references
            //      (as well as pointless attempts to put Auth tokens inside Auth requests)
            deps: [XHRBackend, RequestOptions, AuthStore, Config, Locator, PanelGuidStore],
            useFactory: (
                backend: XHRBackend,
                defaultOptions: RequestOptions,
                authStore: AuthStore,
                config: Config,
                locator: Locator,
                panelGuidStore: PanelGuidStore
                ) =>
                new AuthService(
                    new Http(backend, defaultOptions), authStore, config, locator, panelGuidStore
                ),
        },
        {
            provide: Http,
            // Factory for Http
            // Use custom http provider to inject access tokens and deal with access token expiry
            deps: [XHRBackend, RequestOptions, Location, RequestInterceptor, ResponseInterceptor],
            useFactory: (
                backend: XHRBackend,
                defaultOptions: RequestOptions,
                location: Location,
                requestInterceptor: RequestInterceptor,
                responseInterceptor: ResponseInterceptor,
                authService: AuthService) =>
                new AuthHttpProvider(
                    backend, defaultOptions, requestInterceptor, responseInterceptor
                    ),
        },
      ],
    })

This is what visual studio code has to say about it's "providers" parameters:

(property) providers: (any[] | typeof HttpModule | typeof Location | typeof AuthStore | typeof RequestInterceptor | typeof ResponseInterceptor | { [x: number]: undefined; provide: typeof Config; deps: (typeof XHRBackend | typeof RequestOptions)[]; useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => Config; } | { [x: number]: undefined; provide: typeof PanelGuidStore; useFactory: () => PanelGuidStore; } | typeof Locator | { [x: number]: undefined; provide: typeof AuthService; deps: (typeof XHRBackend | typeof RequestOptions | typeof AuthStore | typeof Config | typeof Locator | typeof PanelGuidStore)[]; useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, authStore: AuthStore, config: Config, locator: Locator, panelGuidStore: PanelGuidStore) => AuthService; } | { [x: number]: undefined; provide: typeof Http; deps: (typeof XHRBackend | typeof RequestOptions | typeof Location | typeof RequestInterceptor | typeof ResponseInterceptor)[]; useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, location: Location, requestInterceptor: RequestInterceptor, responseInterceptor: ResponseInterceptor, authService: AuthService) => AuthHttpProvider; })[]

ConnectionBackend is just an interface. This is the interface that XHRBackend implements. We need a ConnectionBackend, and XHRBackend is the implementation. So you can just take out the ConnectionBackend provider. — Paul Samsotha
@peeskillet yeah. "No provider for XHRBackend". If I try to provide XHRBackend directly, I get "No provider for BrowserXhr" which leads down a rabbit hole that I can't find the end of (I think "No provider for ResponseOptions" is next). — Nathan Cooper
Maybe it's not getting the XHRBackend from the HttpModule. Maybe try taking out the HttpModule, and just check out its source, and explicitly add the other providers you are missing from the module. To clean it up, just create your own module and import it — Paul Samsotha
Duhh I think I see the problem. You should be importing the HttpModule ,not adding it as a provider — Paul Samsotha

Paul Samsotha Paul Samsotha · Accepted Answer · 2016-09-15T12:21:06

ConnectionBackend is just an interface. This is the interface that XHRBackend implements. So you can just take out the ConnectionBackend provider.

The reason you are getting the missing HRBackend error is because you should be importing the HttpModule, not adding it as a provider

imports: [ HttpModule /* DO */ ],
providers: [ HttpModule /* DONT */ ]

ConnectionBackend not working in angular 2 release? How do I provide XHRBackend?

1 Answers