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 { 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已被弃用，您不应再使用此and。但是，您也不应该同时导入这两个文件，因此需要从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