Angular Interceptors not working in angular 5 version - angular-http-interceptors

Question

I am also getting the same error , NO provider for the class
AppHttpInterceptor even i added the provider in the app module and done every small thing to get it worked.
Please go through the code
http.interceptor.ts
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse, HttpErrorResponse } from '#angular/common/http';
import { Injectable } from "#angular/core"
import { Observable } from "rxjs";
import { tap, catchError } from "rxjs/operators";
import { ToastrService } from 'ngx-toastr';
import { of } from 'rxjs/observable/of';
#Injectable()
export class AppHttpInterceptor implements HttpInterceptor {
constructor(public toasterService: ToastrService) { }
intercept(
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
console.log('start')
return next.handle(req).pipe(
tap(evt => {
console.log(evt);
alert();
if (evt instanceof HttpResponse && evt.body && evt.body.success) {
this.toasterService.success(evt.body.success.message, evt.body.success.title, { positionClass: 'toast-bottom-center' });
}
}),
catchError((err: any) => {
console.log('err')
if (err instanceof HttpErrorResponse) {
try {
this.toasterService.error(err.error.message, err.error.title, { positionClass: 'toast-bottom-center' });
} catch (e) {
this.toasterService.error('An error occurred', '', { positionClass: 'toast-bottom-center' });
}
//log error
}
return of(err);
}));
}
}
role.service.ts
import { AppHttpInterceptor } from './http.interceptor';
import { Injectable } from '#angular/core';
import { Headers, Http, RequestOptions, Response } from "#angular/http";
import { environment } from '../../environments/environment';
#Injectable()
export class RolesService {
private apiUrl = environment.apiUrl
constructor(private http: Http, private ads: AppHttpInterceptor) { }
getRoles() {
let url = this.apiUrl + '/api/v1/role/all';
return this.http.get(url, this.jwt()).map((response: Response) => {
//console.log('service', response)
// this.ads.displayToast(response.json());
return response;
});
}
}
}
I have added the provider for the hTTp Interceptors in the app module as below
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { ThemeComponent } from './theme/theme.component';
import { LayoutModule } from './theme/layouts/layout.module';
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ScriptLoaderService } from "./_services/script-loader.service";
import { ThemeRoutingModule } from "./theme/theme-routing.module";
import { AuthModule } from "./auth/auth.module";
import { SharedService } from './_services/shared.service';
import { ToastrModule } from 'ngx-toastr';
import { AppHttpInterceptor } from './_services/http.interceptor';
#NgModule({
declarations: [
ThemeComponent,
AppComponent
],
imports: [
LayoutModule,
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
ThemeRoutingModule,
AuthModule,
HttpClientModule,
ToastrModule.forRoot({
timeOut: 2000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
autoDismiss: true,
newestOnTop: true,
progressBar: true,
closeButton: true,
tapToDismiss: true
}),
],
providers: [ScriptLoaderService, SharedService,
[{
provide: HTTP_INTERCEPTORS, useClass: AppHttpInterceptor, multi: true
}]
],
bootstrap: [AppComponent]
})
export class AppModule { }