1

更新到 Angular 5 后出现错误：控制台错误：“错误类型错误：无法读取 HttpInterceptorHandler.handle (http.js:1777) 处未定义的属性‘拦截’......”

“未处理的承诺拒绝：无法读取未定义的属性“拦截”；区域：；任务：Promise.then；值：TypeError：无法读取未定义的属性“拦截””

服务代码

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

包.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"
  }
4

1 回答 1

4

我认为app.module.ts中的行：useFactory：HttpInterceptorService，

必须改成：useClass:HttpInterceptorService,

于 2017-11-09T17:19:32.640 回答