Extending HTTP module in Angular2 throws error

Question

I am trying to extend the Angular2 HTTP module in order to create an HTTP interceptor of sorts.. the only problem is when I try to extend this module I get the following error:

No provider for ConnectionBackend!

I have no idea why this is happening and can't seem to get this error to go.

Here is my custom HTTP module:

import { Injectable } from "@angular/core";
import { Http, ConnectionBackend, RequestOptions, Request, RequestOptionsArgs, Response } from "@angular/http";
import { Observable } from "rxjs";

@Injectable()
export class HttpInterceptor extends Http {
    constructor(
        backend: ConnectionBackend,
        defaultOptions: RequestOptions
    ) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        console.log('request...');
        return super.request(url, options).catch(res => {
            // do something
        });
    }

    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        console.log('get...');
        return super.get(url, options).catch(res => {
            // do something
        });
    }
}

And here is my app.module.ts file:

import 'app/rxjs-extensions';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { HttpModule } from "@angular/http";
import { FormsModule } from "@angular/forms";

import { AuthGuard } from "./guards/auth.guard";
import { routing } from "./app.routing";

import { AppComponent }   from './app.component';

import { HomeComponent } from "./components/home/HomeComponent";
import { LoginComponent } from "./components/login/LoginComponent";
import { NavBarComponent } from "./components/navbar/NavBarComponent";
import { ProductComponent } from "./components/catalog/products/ProductComponent";

import { GlobalEventsManager } from "./services/globalEventsManager.service";
import { AuthService } from "./services/auth.service";
import { ToastModule } from 'ng2-toastr/ng2-toastr';
import { LeftNavComponent } from "./components/left-nav/left-nav-component";
import { SettingsComponent } from "./components/settings/settings-component";
import { UsersComponent } from "./components/users/users-component";
import { OptionsComponent } from "./components/catalog/options/OptionsComponent";
import { CategoriesComponent } from "./components/catalog/categories/CategoriesComponent";
import { ManufacturersComponent } from "./components/catalog/manufacturers/ManufacturersComponent";
import { ProductSearchComponent } from "./components/catalog/products/directives/ProductSearchComponent";
import { ProductListComponent } from "./components/catalog/products/directives/ProductListComponent";
import { ProductService } from "./services/product.service";
import { HttpInterceptor } from "./services/HttpInterceptor.service";


@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        routing,
        ToastModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        NavBarComponent,
        ProductComponent,
        ProductSearchComponent,
        ProductListComponent,
        LeftNavComponent,
        SettingsComponent,
        UsersComponent,
        OptionsComponent,
        CategoriesComponent,
        ManufacturersComponent
    ],
    providers: [
        AuthService,
        AuthGuard,
        GlobalEventsManager,
        ProductService,
        HttpInterceptor
    ],
    bootstrap:    [ AppComponent ]
})

export class AppModule { }

I have tried placing the my HttpInterceptor module inside the providers array in this file and this still doesn't work. Can anyone tell me why this is not working?

Thanks!

Maximilian Riegler · Accepted Answer · 2016-10-24 08:48:59Z

4

You have to construct and provide your extended class yourself like so:

    ProductService,
    {
        provide: HttpInterceptor,
        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) =>
            new HttpInterceptor(backend, defaultOptions),
        deps: [XHRBackend, RequestOptions]
    }
],

edited Oct 24, 2016 at 8:48

answered Oct 24, 2016 at 8:41

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

James Over a year ago

This does not work unfortunately.. I get a 'xhrBackend is not defined' error

James Over a year ago

Yeah just realised that just as you posted your updated answer! works great cheers!

phil_lgr Over a year ago

what about injecting another "MyService" in there ? I add it in the provide declaration and also in the HttpInterceptor constructor and got No provider for MyService

Alireza Mirian Over a year ago

Using XHRBackend works fine on browser platform, but it has some issues in server platform. For me, routing doesn't work fine when using the extended http client in resolve guards.

Darius Costolas · Accepted Answer · 2017-02-21 12:25:13Z

1

Also, if you want to inject another MyService in there, you can do

   {
      deps: [XHRBackend, RequestOptions, MyService],
      provide: HttpInterceptor,
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, myService: MyService) =>
        new HttpInterceptor(backend, defaultOptions, myService),
    },

After that, just inject MyService in the HttpInterceptor

answered Feb 21, 2017 at 12:25

Darius Costolas

214 bronze badges

Collectives™ on Stack Overflow

Extending HTTP module in Angular2 throws error

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related