eckig 5: Kann die Eigenschaft 'intercept' von undefined bei HttpInterceptorHandler.handle nicht lesen

Question

Wir erhalten Fehler nach dem Update auf eckige 5: Console error: "Fehler TypeError: Kann nicht 'intercept' von undefined bei HttpInterceptorHandler.handle (http. js: 1777) ...... "

" Unhandled Promise Ablehnung: Kann Eigenschaft 'Intercept' von undefined nicht lesen; Zone:; Aufgabe: Promise.then; Value: TypeError: Kann die Eigenschaft 'intercept' von undefined nicht lesen "

Servicecode

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

Ich denke, die Linie in app.module.ts: useFactory: HttpInterceptorService,

geändert werden muss: useClass : HttpInterceptorService,