Angular Positing Console Errors on API Call

Question

I've got an angular site that's reporting error messages to the console, but it's working on screen. I suspect it's due to how the page renders, but after googling the error and Angular rendering I can't see how to fix it.

This is how the console looks:

This is the service that's handling the API calls:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from "@angular/http";

@Injectable()
export class WmApiService {

  private _baseUrl = "http://localhost:58061/";
  tempuser = "WebDevelopWolf";
  modules: any;

  constructor(private _http: Http) {
    console.log('Wavemaker API Initialized...');
  }

  // On successful API call
  private extractData(res: Response) {
    let body = res.json();
    return body || {};
  }

  // On Error in API Call
  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }

  // Basic Get W/ No Body
  getService(url: string): Promise<any> {
    return this._http
        .get(this._baseUrl + url)
        .toPromise()
        .then(this.extractData)
        .catch(this.handleError);
  }

  // Basic Post W/ Body
  postService(url: string, body: any): Promise<any> {
    console.log(body);
    let headers = new Headers({'Content-Type': 'application/json'});
    return this._http
      .post(this._baseUrl + url, body, {headers: headers})
      .toPromise()
      .then(this.extractData)
      .catch(this.handleError);
  }

}

And finally the call to the service:

ngOnInit() {
    this.getUserProfile();
  }

  // Fill the user profile information
  getUserProfile() {
    this._wmapi
    .getService("User/" + this._wmapi.tempuser)
    .then((result) => {
      // Push the user to UI
      this.userProfile = result;
      // Set the user avatar
      this.userAvatar = "../assets/users/profile/" + this.userProfile.Username + ".png"; 
    })
    .catch(error => console.log(error));
  }

I've had a couple of people tell me in the past that I shouldn't be using promises because they're outdated, but it's just what familiar with from working with Ionic a couple of years back - however, if there is a better way to do it I'm definitely open to suggestion, especially if it's the promise that's causing the issue.

in your html template use ```UserFullName``` like this : ```{{some-value?.UserFullName}}``` — Fateme Fazli, Aug 21 '18 at 10:52
Probably you're calling a variable "UserFullName" somewhere that is not yet initialized. — JeroenE, Aug 21 '18 at 10:54
I suggest you make yourself familiar with the async pipe and don't resolve the promise yourself. The error occurs since the template tries to render data before the asynchronous call is completed. You can use a default object (like "loading..") or the elvis operator to avoid the error on the console. — Thomas, Aug 21 '18 at 10:54
@fatemefazli - yep that's done the trick - thanks - if you pop that in as the answer I'll mark it as correct :) — Web Develop Wolf, Aug 21 '18 at 10:55
Possible duplicate of [Angular2: Cannot read property 'name' of undefined](https://stackoverflow.com/questions/39755336/angular2-cannot-read-property-name-of-undefined) — Igor, Aug 21 '18 at 10:56

score 2 · Accepted Answer · answered Aug 21 '18 at 10:57

2

try:

<div>{{some-value?.UserFullName}}</div>

Your some-value object doesn't have the value until the API response arrives. Then use ? to apply the null check until the response arrives.

answered Aug 21 '18 at 10:57

Fateme Fazli

11,582
2
31
48

score 0 · Answer 2 · answered Aug 21 '18 at 10:58

The problem is that angular is trying to render your component and this.userProfile is not instantiated yet by that moment, so you are trying to resolve the props of undefined.

You need to handle the case when there is no userProfile, so you can either use ngIf for that section of template, or use getter to get those props, or perform check directly in template {{userProfile && userProfile.someProp}}

Angular Positing Console Errors on API Call

2 Answers2