I am trying to get a list of Users from an API but I get the following error:
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)
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.
login.component.ts:
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 => this.users = users);
}
}
Home.service:
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<User[]> {
return this.http.get<User[]>(this.usersUrl)
.pipe(
tap(users => 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<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
// 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);
}
}
and the app.module:
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 { }
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.
I got the same issue. The problem was that I had declared the url, but when doing the httpget, i realized that the url was not assigned with any value:
Probable case: Example: private yourUrl: string;
and in your http call: return this.http.get(this.yourUrl, {headers : this.headers})