title: HttpInterceptor and In memory data service Angular 7
body: <p>I have been using a dummy auth for an app I am working on. So I have implemented this successfully using a dummy local user.</p>
  
  <p>Unfortunately I have hit a brick wall when it comes to trying to get this to work with the in memory data service. My users array is coming back undefined and a unable to change error to string in the console log.
  Below is the fake back end using the interceptor.</p>
  
  <pre><code>import { Injectable, OnInit } from '@angular/core';
  import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
  import { Observable, of, throwError } from 'rxjs';
  
  import { User } from '@/data/models/property/user';
  import { UserService } from '@/_services/user.service';
  
  @Injectable()
  export class FakeBackendInterceptor implements HttpInterceptor, OnInit {
  
    users: User[];
  
    constructor(private http: HttpClient, private userService: UserService) { }
  
    ngOnInit() {
      this.getAll();
    }
    private getAll(): void {
      this.userService.getAll()
        .subscribe(data =&gt; this.users = data);
    }
  
    intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      // authenticate
      if (request.url.endsWith('/users/authenticate') &amp;&amp; request.method === 'POST') {
      // find if any user matches login credentials
        const filteredUsers = this.users.filter(user =&gt; {
          if (user.email === request.body.email &amp;&amp; user.password === request.body.password) {
          return user;
          }
        });
  
      if (filteredUsers) {
        // if login details are valid return 200 OK with user details and fake jwt token
        const user = filteredUsers[0];
        const body = {
          id: user.id,
          email: user.email,
          firstName: user.firstName,
          lastName: user.lastName,
          studentNo: user.studentNo,
          isStaff: user.isStaff,
          token: 'fake-jwt-token'
        };
  
      return of(new HttpResponse({ status: 200, body: body }));
        } else {
          // else return 400 bad request
          return throwError({ error: { message: 'Email or password is incorrect' } });
        }
      }
      return next.handle(request);
  
    }
  }
  </code></pre>
  
  <p>and next is my user service.</p>
  
  <pre><code> import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  import { catchError, map, tap } from 'rxjs/operators';
  
  import { User } from '../data/models/property/user';
  
  @Injectable({ providedIn: 'root' })
  export class UserService {
    constructor(private http: HttpClient) { }
  
    getAll(): Observable&lt;User[]&gt; {
      return this.http.get&lt;User[]&gt;('api/users')
        .pipe(
          catchError(this.handleError('getAll', []))
        );
    }
  
    getById(id: number) {
      return this.http.get(`/users/${id}`);
    }
  
    register(user: User) {
      return this.http.post(`/users/register`, user);
    }
  
    update(user: User) {
      return this.http.put(`/users/${user.id}`, user);
    }
  
    delete(id: number) {
      return this.http.delete(`/users/${id}`);
    }
  
    private handleError&lt;T&gt;(operation = 'operation', result ?: T) {
      return (error: any): Observable&lt;T&gt; =&gt; {
  
        // TODO: send the error to remote logging infrastructure
        console.error(error.name); // log to console instead
  
        // Let the app keep running by returning an empty result.
        return of(result as T);
      };
    }
  }
  </code></pre>
  
  <p>I suspect this is something I have missed or unsure on. Any help gratefully received.</p>
  
  <p>EDIT: When debugging I am getting a RangeError: Maximum call stack size exceeded</p>