Angular HttpClient subscribe cannot read property 'name' of undefined

Related searches

I have the following component and service: Component

  selector: 'app-root',
  template: '{{}}',
  styleUrls: ['./app.component.scss']
export class AppComponent {

  user: User;

  constructor(private userService: UserService) {
    this.userService.get().subscribe(user => {
      this.user = user;



export class UserService {
  constructor(private http: HttpClient) {

  get(): Observable<User> {
    return this.http.get<User>('');


export class User {
    public name: string
  ) {

As you can see, I'm just trying to print the user's name. It works, but before it prints the value I receive Cannot read property 'name' of undefined error several times. I know the reason — I load the user asynchronously, but how to deal with it? I found the safe operator:


And it works. But in my real project this approach will not work everywhere. I also tried to use ngIf:

<div *ngIf="user">

But this will break another part of my app. Is there a way to render a component after an HTTP call, so that I don't have to use Safe Operator or ngIf? If not, then what approach do you use? How do you deal with this problem?

You can prevent it by create default User object

export class AppComponent {

  user = new User('');


Angular HttpClient get method subscribe Cannot read property , Since I have used .subscribe in component.ts for calling this service method, getting "TypeError: Object doesn't support property or method 'map'" on condition � lishichao1002 changed the title @angular/common/http Cannot read property 'length' of undefined HttpClient Cannot read property 'length' of undefined Mar 17, 2018 This comment has been minimized. Sign in to view

Your code looks correct, change your user class to interface:

export interface User {
  name: string;

Or if you want to use the class, change it to:

export class User {
  name: string;

You current code:

export class User {
  constructor( public name: string) {

Means property will be created only when the constructor will be called, and that will only be called when you will try to create the object by using new:

user = new User();

What Am I'm doing Wrong with Observables and Services? : Angular2, ERROR TypeError: Cannot read property 'subscribe' of undefined Response, URLSearchParams } from '@angular/http' import { HttpClient, HttpHeaders,� I am super new to angular so I don’t know if this been answered. I looked into some answers but couldn’t get this right. Sorry if this is already been answered. I have a Angular service that call backend Rest API

If you mean to say that by introducing another extra div in your template will break the CSS, you can use ng-container element and have *ngIf in that as

<ng-container *ngIf="user">{{user}}</ng-container>

According to the definition

The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

HttpClient Cannot read property 'length' of undefined � Issue #22837 , HttpClient Cannot read property 'length' of undefined #22837 _trySubscribe ( Observable.js:172) at Observable.subscribe (Observable.js:160) lishichao1002 changed the title @angular/common/http Cannot read property� I keep getting the following error: Cannot read property ‘get’ of undefined at Object.getChannelIdFromYoutubeUsername at Object.vm

You don't need create a DTO for this case:

  get(): any{
return this.http.get<User>('');


Post Undefined HttpClient � Issue #30881 � angular/angular � GitHub, Prior to this i was using HttpClient for my post requests and it went along fine. After the update i get a TypeError: Cannot read property 'post' of undefined i've bee. Sign up for free to subscribe to this conversation on GitHub. Photo by Kevin on Unsplash. One of the interesting additions that came about with the HttpClient in Angular is the HttpClientTestingModule.. Using that module, one can fully (unit)test a component or a service without using an actual server implementation to handle HTTP requests from the Angular application.

Communicating with backend services using HTTP, The HTTP client service offers the following major features. In Adding headers, for example, the service set the default headers using the headers option property. is a plain object that cannot be automatically converted to an instance of a class. For example, the following subscribe callback receives data as an Object,� Subscribe On YouTube. In Angular 4.3 the new HttpClientModule has been introduced. This new module is available in package @angular/common/http and a complete re-implementation of the former

In this tutorial, we used Angular 8 to build a simple news application that retrieves data from a JSON REST API using the get() method of HttpClient. We’ve seen how to subscribe to the RxJS Observable returned by the get() method and how to use the *ngFor directive to iterate over fetched data in the template.

Angular 9 HttpClient is an inbuilt module that helps us to send network requests to any server. Angular HttpClientModule is used to send GET, POST, PUT, PATCH, and DELETE requests. Angular can consume REST API using the Angular HttpClient module. The latest version of the Angular framework is Angular 9.