'HttpInterceptor' 仅指一种类型，但在此处用作值

Question

我将新的 VS2017 angular 项目从原来的 4.2.5 升级到 v4.4.6，然后尝试在我的 app.module.shared.ts 文件中设置HttpInterceptor，如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClient, HttpInterceptor } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        CounterComponent,
        FetchDataComponent,
        HomeComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClient,
        HttpInterceptor,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

VS 已将第 5 行的 HttpInterceptor 导入命令灰显，并在第 28 行记录了一个错误，我在导入列表中调用了 HttpInterceptor。鼠标悬停在红色波浪线上会显示错误消息“(TS) 'HttpInterceptor' 仅指一种类型，但在此处用作值。”

我做错了什么？这基本上是一个原始的、开箱即用的 Angular 实例，基于最新的 VS2017 模板，我唯一做的就是更新 angular 并运行 webpack 的东西。

Answer 1

HttpInterceptor 是一个接口，但“imports”部分等待一个类。

编辑：据我所知，上面的解释不太清楚，简而言之：

根据https://angular.io/api/common/http/HttpInterceptor

HttpInterceptor 是一个接口

interface HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>
}

我们必须创建一个实现此接口的类并将其放入导入中，而不是将接口放入“imports: [...]”，例如：

@Injectable()
export class AppHttpInterceptor implements HttpInterceptor { 
        // bla bla bla
}

然后

imports: [
...,
AppHttpInterceptor,
...
]