CODEWITHSUNDEEP
httpangulartypescript
James
James

Reputation: 2860

Extending HTTP module in Angular2 throws error

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!

Upvotes: 3

Views: 1394

Answers (2)

Darius Costolas
Darius Costolas

Reputation: 21

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

Upvotes: 1

Maximilian Riegler
Maximilian Riegler

Reputation: 23506

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

Upvotes: 4

Related Questions