错误：没有NoopInterceptorService的提供者！角度4.3.6？

Question

我写了一个简单的拦截器＆＃34; NoopInterceptorService＆＃34;

但我得到一个错误＆＃34;没有NoopInterceptorService的提供者！＆＃34; ，

可能是什么原因？

如何解决？

Answer 1

首先，为了实施INTERCEPTOR，您可以使用HttpClientModule代替HttpModule进行任何http调用。

现在，实施：

在App.module.ts文件中，导入：

import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';

在您AppModule的导入数组中添加以下内容：

  imports: [
      .
      HttpClientModule,
       .
  ]

您的提供者数组和NoopInterceptorService实现似乎是正确的。但重要的是，只要您在任何组件代码中使用http方法，就不要忘记使用HttpClientModule的http方法而不是旧的HttpModule。

我认为如果您遵循这一点，您的INTERCEPTORS将会奏效。

Answer 2

这个LINK应该有助于编写拦截器。

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

@Injectable()
export class AngularInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).do(event => {}, err => {
        if(err instanceof HttpErrorResponse){
            console.log("Error Caught By Interceptor");
            //Observable.throw(err);
        }
    });
  }
}

PLuggin

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