Make a request for Json data inside a constructor of an Angular 4 home module?

I’m a total newbie into Angular/Typescript web development.

I’m developing a website using ASP.NET Core 2.0 and Angular 4. It needs to fetch some data and present it at the homepage (that would be the home component of the Angular app). I’ve seen some examples and they suggest doing something like this:

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';
@Component({
    selector: 'quotes',
    templateUrl: './quotes.component.html'
})
export class FetchDataComponent {
    public quotes: Quote[];

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        http.get(baseUrl + 'api/quotes/recent').subscribe(result => {
            this.quotes = result.json() as Quote[];
        }, error => console.error(error));
    }
}

interface Quote {
    text: string;
    author: string;
    timeStamp: Date;
}

That code works fine when the component is not the first one to be presented when the page is loaded. If I try to fetch data on the home component, the server freaks out and throws all kind of exceptions. First, it throws a TaskCancelledException, and further requests throw:

NodeInvocationException: Prerendering timed out after 30000ms because the boot function in 'ClientApp/dist/main-server' returned a promise that did not resolve or reject.

I’m assuming that I’m doing stuff very wrong, but I haven’t seen any other way of doing what I want.

I tried moving the offending code (the http.get request) to a separate function, but now I don’t know how am I supposed to call it when the component finished loading.

import { Component, Inject } from '@angular/core';
import { Http } from '@angular/http';
@Component({
    selector: 'quotes',
    templateUrl: './quotes.component.html'
})
export class FetchDataComponent {
    public quotes: Quote[];
    private ht: Http;
    private url: string;

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        this.ht = http;
        this.url = baseUrl;
    }

    fetchQuotes(): void {
        this.ht.get(baseUrl + 'api/quotes/recent').subscribe(result => {
            this.quotes = result.json() as Quote[];
        }, error => console.error(error));
    }
}

interface Quote {
    text: string;
    author: string;
    timeStamp: Date;
}

No http event has helped me. I can make everything work using the (click)="" directive, but obviously, I don’t want the user to have to click something for the app to work as expected. No other directive seems to work either.

Below is the code I have on the html of the component:

<p class="warning" *ngIf="!quotes" (click)="fetchQuotes()">
    <span class="glyphicon glyphicon-warning-sign"></span>
    <em>There's nothing to show yet.</em>
</p>
<div *ngIf="quotes">
    <ul class="quoteList" *ngFor="let quote of quotes">
        <li>
            
            <small>, </small>
        </li>
    </ul>
</div>

So to summarize, I need a way to fetch data for the component that Angular will show by default upon loading the page.

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/14/make-a-request-for-json-data-inside-a-constructor-of-an-angular-4-home-module/
via @lzomedia #developer #freelance #web #lzomedia.com