Angular5 httpClient get:Cannot read property 'toLowerCase' of undefined
Solution 1
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})
Solution 2
it seems you have declared a variable wrongly thus making it undefined: Try this
For neat coding
interface User = {
id: number;
userName: string;
password: string;
}
user: User;
Also correct this line from
private usersUrl: 'http://localhost:8080/users';
To
private usersUrl = 'http://localhost:8080/users';
This is likely where the problem is
Solution 3
i think your url declaration is not correct try the following way:
private usersUrl = 'http://localhost:8080/users';
Solution 4
The issue is with the URL that you have passed:
private usersUrl: http://localhost:8080/users';
.
It should be like:
private usersUrl: string='http://localhost:8080/users';
Canlla
Updated on June 20, 2022Comments
-
Canlla almost 2 years
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.
-
Daniel Bailey over 5 yearsThank you! Instead of my
=
I had a:
cannot believe it. -
Mahesh Vemula almost 5 yearsSame in my case. Thank you, it saved my day
-
MindRoasterMir over 3 yearsThanks this was the reason.