0

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: enter image description here

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.

Web Develop Wolf
  • 5,996
  • 12
  • 52
  • 101
  • 2
    in your html template use ```UserFullName``` like this : ```{{some-value?.UserFullName}}``` – Fateme Fazli Aug 21 '18 at 10:52
  • post your template – Jason White Aug 21 '18 at 10:53
  • 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
  • 1
    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

2 Answers2

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.

Fateme Fazli
  • 11,582
  • 2
  • 31
  • 48
0

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}}