NullInjectorError: No provider for ConnectionBackend

Question

I'm receiving the following error when I try to load the page. I've tried some of the suggestions from other articles here on StackOverflow but I just can't hit on the solution. My code is below the error stack.

core.js:7187 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[Http -> ConnectionBackend]: 
  StaticInjectorError(Platform: core)[Http -> ConnectionBackend]: 
    NullInjectorError: No provider for ConnectionBackend!
NullInjectorError: StaticInjectorError(AppModule)[Http -> ConnectionBackend]: 
  StaticInjectorError(Platform: core)[Http -> ConnectionBackend]: 
    NullInjectorError: No provider for ConnectionBackend!
    at NullInjector.get (core.js:1354)
    at resolveToken (core.js:1681)
    at tryResolveToken (core.js:1607)
    at StaticInjector.get (core.js:1470)
    at resolveToken (core.js:1681)
    at tryResolveToken (core.js:1607)
    at StaticInjector.get (core.js:1470)
    at resolveNgModuleDep (core.js:23104)
    at NgModuleRef_.get (core.js:24192)
    at resolveDep (core.js:24722)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:30873)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)

app.module.ts:

I've added in the import of the httpModule and added it to the imports array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { JsonpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { ApiAuthorizationModule } from 'src/api-authorization/api-authorization.module';
import { AuthorizeGuard } from 'src/api-authorization/authorize.guard';
import { AuthorizeInterceptor } from 'src/api-authorization/authorize.interceptor';
import { MemberComponent } from './member/member.component';
import { HttpModule } from '@angular/http';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    MemberComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpModule,
    HttpClientModule,
    JsonpModule,
    FormsModule,
    ApiAuthorizationModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'member', component: MemberComponent, canActivate: [AuthorizeGuard] },
    ])
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here's the page module - member.component.ts:

I know exactly what line of code trips the exception. It's the constructor. If I comment out the constructor the page will load.

import { Component } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpModule } from '@angular/http';
import { Http, Response } from '@angular/http';
import { Portfolio } from '../models/Portfolio';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-member-component',
  templateUrl: './member.component.html',
  providers: [Http, HttpModule]
})

@Injectable()
export class MemberComponent {

    constructor(private http: Http) { }

    public getPortfolios() {

        //return this.http.get('api/portfolio').map((r: Response) => <Portfolio><unknown>[] > r.json().data);
    }
}

Can you spot what I am missing? Thank you for your help!

Answer 1

You seem to be working with a relatively old angular version. So my first suggestion is to update your code base. For security, speed and 'ease of finding answers to questions'.

Second point. You are importing the HttpModule and the HttpClientModule in your AppModule . The HttpModule is deprecated, and you should not use this one anymore. Nevertheless, you should also never import both, so you need to remove the HttpModule from your AppModule .

Another issue is the JsonpModule , this as well has been deprecated, and the use case for this is now embedded inside the HttpClient , so you should remove this module as well.

After that, your MemberComponent . You are injecting Http . This is a service from the old deprecated HttpModule . You should replace that with the HttpClient . While using the HttpClient , you do not have to use the .json() anymore, because this is done automatically.

Also, you should not add the Http provider to the @Component definition, and you should -never- import a module in a providers array.

Last point, @Injectable on a component is redundant, because all components are injectable. This brings us to this result:

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    MemberComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ApiAuthorizationModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'member', component: MemberComponent, canActivate: [AuthorizeGuard] },
    ])
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthorizeInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

With your component:

@Component({
  selector: 'app-member-component',
  templateUrl: './member.component.html'
})
export class MemberComponent {

    constructor(private http: HttpClient) { }

    public getPortfolios() {
      return this.http.get<Portfolio[]>('api/portfolio');
    }
}

Answer 2

You should inject HttpClient from @angular/common/http