My current project involves creating an Error Handling Service for an Angular 6 Application using the HTTP Interceptor. The main goal of this service is to capture any HTTP errors and provide corresponding error codes. However, my lack of familiarity with Observables, Subscriptions, and the HTTPInterceptor in Angular is causing me some trouble. When I try to compile the following code, I encounter the error message:
error TS2663: Cannot find name 'http'. Did you mean the instance member 'this.http'?Below is the code snippet for the Error Handler:
import { ErrorHandler, Injectable } from '@angular/core';
import { HttpInterceptor, HttpClient, HttpErrorResponse } from '@angular/common/http';
import { InterceptService } from './InterceptService';
import { Http, Headers, RequestOptions } from '@angular/http';
@Injectable()
export class ErrorsHandler extends ErrorHandler {
private data: any;
private error: any;
constructor(
public http: InterceptService
) {
super();
}
handleError(error: Error | HttpErrorResponse) {
if (error instanceof HttpErrorResponse) {
// Server or connection error happened
if (!navigator.onLine) {
console.log('A mild error has occurred, please check your internet connection!');
}
else {
// TODO: Set Config for Services
http
.get('Put Service URL here')
.map(res => {
// If request fails, throw an Error that will be caught
if (res.status < 200 || res.status >= 300) {
throw new Error('This request has failed ' + res.status);
} else {
return res.json();
}
})
.subscribe(
(data) => this.data = data,
299(err) => this.error = err);
}
} else {
// Check the Connectivity of Services
console.log('Please debug the following error', console.error);
}
// Log the error anyway
console.error('Please debug the following error: ', console.error);
}
}
And here is the code for the Intercept Service:
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
@Injectable()
export class InterceptService implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest < any > , next: HttpHandler):
Observable < HttpEvent < any >> {
// modify request
request = request.clone({
setHeaders: {
Authorization: `Bearer ${localStorage.getItem('MY_TOKEN')}`
}
});
console.log("----request----");
console.log(request);
console.log("--- end of request---");
return next.handle(request)
.pipe(
tap(event => {
if (event instanceof HttpResponse) {
console.log(" all looks good");
console.log(event.status);
}
}, error => {
console.log("----response----");
console.error("status code:");
console.error(error.status);
console.error(error.message);
console.log("--- end of response---");
})
);
}
}
I am seeking guidance on whether I am using the HTTP Interceptor correctly and how to properly inject it into the Error Handler. Additionally, I need help resolving the error mentioned earlier. Any assistance or tips would be greatly appreciated!