NullInjectorError：没有 ConnectionBackend 的提供者

Question

我在尝试加载页面时收到以下错误。我已经尝试了 StackOverflow 上其他文章中的一些建议，但我无法找到解决方案。我的代码位于错误堆栈下方。

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：

我已经在 httpModule 的 import 中添加了，并将其添加到了 imports 数组中。

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 { }

这是页面模块 - member.component.ts：

我确切地知道哪一行代码触发了异常。它是构造函数。如果我注释掉构造函数，页面将加载。

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);
    }
}

你能发现我错过了什么吗？感谢您的帮助！

Answer 1

您似乎正在使用相对较旧的 Angular 版本。所以我的第一个建议是更新你的代码库。为了安全、速度和“轻松找到问题的答案”。

第二点。您在AppModule 中导入HttpModule 和HttpClientModule。 HttpModule 已弃用，您不应再使用它。尽管如此，您也不应该同时导入两者，因此您需要从您的AppModule 中删除HttpModule。

另一个问题是JsonpModule，它也已被弃用，它的用例现在嵌入在HttpClient 中，因此您也应该删除此模块。

之后，您的MemberComponent。您正在注入 Http。这是旧的已弃用 HttpModule 的服务。您应该将其替换为HttpClient。在使用HttpClient 时，您不必再使用.json()，因为这是自动完成的。

此外，您不应该将 Http 提供程序添加到 @Component 定义中，并且您应该 - 永远 - 在提供程序数组中导入模块。

最后一点，组件上的@Injectable 是多余的，因为所有组件都是可注入的。这给我们带来了这样的结果：

@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 { }

使用您的组件：

@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

你应该从@angular/common/http注入HttpClient