CODEWITHSUNDEEP
angulartypescriptangular-http-interceptors
user8623502
user8623502

Reputation: 77

"Cannot find http" in Error Handler Service for Angular 6

I am trying to build an Error Handling Service for an Angular 6 Application based on the HTTP Intercepter. The Error Service should preferably catch any HTTP Errors and refer to corresponding Error codes. However, as I am not so firm with Observables, Subscriptions and the HTTPInterceptor of Angular, the following code gives me the Error: error TS2663: Cannot find name 'http'. Did you mean the instance member 'this.http'? when compiling, in the console.

This is 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('Ein leichter Fehler ist vorgefallen, bitte überprüfen Sie 
          Ihre Internetverbindung!');
        }
        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, // Reach here if res.status >= 200 && <= 
              299(err) => this.error = err); // Reach here if fails
        }
      } else {
        // Check the Connectivity of Services
        console.log('Bitte den folgenden Fehler debuggen', console.error);
      }
      // Log the error anyway
      console.error('bitte den folgenden Fehler debuggen: ', console.error);
    }
  }

This is 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() //{providedIn: 'root'}
export class InterceptService implements HttpInterceptor {

  constructor() {}

  // intercept request and add token
  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");
              // http response status code
              console.log(event.status);
            }
          }, error => {
            // http response status code
            console.log("----response----");
            console.error("status code:");
            console.error(error.status);
            console.error(error.message);
            console.log("--- end of response---");
          })
        );
    }
}

I am not sure if I am using HTTP Interceptor the right way and how to inject it properly into the Error Handler and I don´t know how to fix the error; any Help or hints would be appreciated!

Upvotes: 0

Views: 4176

Answers (2)

veeresh mallepaka
veeresh mallepaka

Reputation: 1

Please use below line import the HttpErrorResponse import { HttpClient,HttpErrorResponse } from '@angular/common/http'; or import {HttpErrorResponse } from '@angular/common/http';

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

The error says it all. It should be this.http in your code.

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) {
      if (!navigator.onLine) {
        console.log('Some Error!');
        }
        else {
          this.http
            .get('Put Service URL here')
            .map(res => {
              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,
              (err) => this.error = err); // Reach here if fails
        }
      } else {
        console.log('Bitte den folgenden Fehler debuggen', console.error);
      }
      console.error('bitte den folgenden Fehler debuggen: ', console.error);
    }
  }

Upvotes: 2

Related Questions