title: Angular5 httpClient get:Cannot read property 'toLowerCase' of undefined
body: <p>I am trying to get a list of Users from an API but I get the following error:</p>
  
  <pre><code>TypeError: Cannot read property 'toLowerCase' of undefined
  at HttpXsrfInterceptor.intercept (http.js:2482)
  at HttpInterceptorHandler.handle (http.js:1796)
  at HttpInterceptingHandler.handle (http.js:2547)
  at MergeMapSubscriber.eval [as project] (http.js:1466)
  at MergeMapSubscriber._tryNext (mergeMap.js:128)
  at MergeMapSubscriber._next (mergeMap.js:118)
  at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
  at ScalarObservable._subscribe (ScalarObservable.js:51)
  at ScalarObservable.Observable._trySubscribe (Observable.js:172)
  at ScalarObservable.Observable.subscribe (Observable.js:160)
  </code></pre>
  
  <p>I have a login component that calls the homeService.getUsers() which uses HttpClient to retrieve the users but the http request never reaches the server.</p>
  
  <p>login.component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import { HomeService } from '../service/home.service';
  import { User } from '../domain/user';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
  })
  export class LoginComponent implements OnInit {
  
    user: User = {
        id: undefined,
        userName: undefined,
        password: undefined
    }; 
    users: User[];
  
    constructor(
      private homeService: HomeService
    ) { }
  
    ngOnInit() {
      this.getUsers();
    }
  
    getUsers(): void {
      this.homeService.getUsers()
      .subscribe(users =&gt; this.users = users);
    }
  }
  </code></pre>
  
  <p>Home.service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
  
  import { Observable } from 'rxjs/Observable';
  import { of } from 'rxjs/observable/of';
  import { catchError, map, tap } from 'rxjs/operators';
  
  import { User } from '../domain/user';
  import { MessageService } from '../service/message.service';
  
  const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
  
  @Injectable()
  export class HomeService {
  
    private usersUrl: 'http://localhost:8080/users';
  
    constructor(
      private http: HttpClient,
      private messageService: MessageService
    ) { }
  
    getUsers (): Observable&lt;User[]&gt; {
      return this.http.get&lt;User[]&gt;(this.usersUrl)
        .pipe(
          tap(users =&gt; this.log(`fetched users`)),
          catchError(this.handleError('getUsers', []))
        );
    }
  
    /**
    * Handle Http operation that failed.
    * Let the app continue.
    * @param operation - name of the operation that failed
    * @param result - optional value to return as the observable result
    */
    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); // log to console instead
  
        // TODO: better job of transforming error for user consumption
        this.log(`${operation} failed: ${error.message}`);
  
        // Let the app keep running by returning an empty result.
        return of(result as T);
      };
    }
  
    private log(message: string) {
      this.messageService.add(message);
    }
  
  }
  </code></pre>
  
  <p>and the app.module:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { RouterModule, Routes } from '@angular/router';
  import { HttpClientModule } from '@angular/common/http';
  import { HttpClientXsrfModule } from '@angular/common/http';
  
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  import { HomeService } from './service/home.service';
  import { MessagesComponent } from './messages/messages.component';
  import { MessageService } from './service/message.service';
  import { LoginComponent } from './login/login.component';
  import { RegisterComponent } from './register/register.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent,
      LoginComponent,
      RegisterComponent,
      MessagesComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      HttpClientXsrfModule.withOptions({
        cookieName: 'My-Xsrf-Cookie',
        headerName: 'My-Xsrf-Header',
      })
    ],
    providers: [HomeService, MessageService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>I can see the error message displayed in the logging, so it seems like an error from the HttpClient. But I can't figure out why it is failing before sending the Http request to the server.</p>