angular 5: 无法读取 HttpInterceptorHandler.handle 处未定义的属性 'intercept'

Question

更新到 angular 5 后出现错误：控制台错误："ERROR TypeError: Cannot read property 'intercept' of undefined at HttpInterceptorHandler.handle (http.js:1777)......"

"Unhandled Promise rejection: Cannot read property 'intercept' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot read property 'intercept' of undefined"

服务代码

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'
import { Observable } from 'rxjs/Observable';

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {

  constructor(){}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(authReq);
  };



}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from "@angular/common/http";
import { HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { LoginModule } from './login/login.module';
import { SharedModule } from './shared/shared.module';
import { HttpInterceptorService } from './shared/auth/http-interceptor.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useFactory: HttpInterceptorService,
    multi: true,
  }],
  bootstrap: [AppComponent]
})
export class AppModule {
}

package.json

"dependencies": {
    "@angular/animations": "5.0.1",
    "@angular/common": "5.0.1",
    "@angular/core": "5.0.1",
    "@angular/forms": "5.0.1",
    "@angular/http": "5.0.1",
    "@angular/platform-browser": "5.0.1",
    "@angular/platform-browser-dynamic": "5.0.1",
    "@angular/platform-server": "5.0.1",
    "@angular/router": "5.0.1",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "2.0.0",
    "bootstrap-sass": "3.3.7",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "ngx-bootstrap": "1.7.1",
    "ngx-cookie": "1.0.1",
    "rxjs": "5.5.2",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.5.0",
    "@angular/compiler": "5.0.1",
    "@angular/compiler-cli": "5.0.1",
    "@angular/language-service": "5.0.1",
    "@types/jasmine": "2.5.45",
    "@types/node": "6.0.60",
    "codelyzer": "3.0.1",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "node-sass": "4.5.3",
    "protractor": "5.1.2",
    "ts-node": "3.0.4",
    "tslint": "5.3.2",
    "typescript": "2.4.2"
  }

Answer 1

我认为 app.module.ts 中的行：使用工厂：HttpInterceptorService，

必须改为：使用类：HttpInterceptorService，

angular 5: 无法读取 HttpInterceptorHandler.handle 处未定义的属性 'intercept'

angular 5: Cannot read property 'intercept' of undefined at HttpInterceptorHandler.handle

angular

angular5

angular 5: 无法读取 HttpInterceptorHandler.handle 处未定义的 属性 'intercept'

angular 5: Cannot read property 'intercept' of undefined at HttpInterceptorHandler.handle

angular

angular5

angular 5: 无法读取 HttpInterceptorHandler.handle 处未定义的属性 'intercept'