17

I have set up and used successfully Angular5 + SSR. It is still pretty nice.

All components work well on SSR and Non-SSR. And there are some services which call external HTTP get APIs to get some data. Of course, it works well on a Non-SSR mode.

But, the problem is that on SSR, the node server does not support to fetch and render the data. I can only see the fetched data after client-side fetching and rendering.

import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs";

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class BannerService {

    constructor(public http: HttpClient){
        console.log('SmsService Initialized...');
    }

    getBanners(){
        return this.http.get(BASE_API_URL + '/getData', httpOptions);
    }
}

home.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Router } from "@angular/router";
import {Subscription} from "rxjs/Subscription";
import {BannerService} from "../../services/banner.service";

@Component({
    selector: 'app-home',
    styleUrls: ['home.container.css'],
    templateUrl: 'home.container.html'
})

export class HomeContainerComponent implements OnInit, OnDestroy {

    public horizontalBannerList1;
    public horizontalBannerList2;
    public verticalBannerList;
    private bannerList;

    constructor( private router: Router, private bannerService: BannerService){
         ...
    }

    ngOnInit() {
        this.initBannerList();
    }

    ngOnDestroy() {
       ...
    }

    initBannerList(){

        if(this.bannerList){
            return;
        }

        this.bannerService.getBanners().subscribe(
            result => {
                console.log("bannerList result : ", result);
                this.bannerList = result;    
            },
            error => {
                console.error("bannerList error: ", error);
            },
            () => {
                console.log("bannerList completed");
            });
    }

}

I expected that on SSR the node server calls HTTP request data and render it on index.html but it's not...

Am I missing or misunderstood?

ps : The same issues are reported. https://github.com/angular/universal/issues/674 If I solve these issues or find out the good doc, I would update it again. :)

Anwarul Islam
  • 561
  • 7
  • 29
Jihoon Kwon
  • 745
  • 5
  • 14
  • Do you get any error server side? How did you check that the API is not called? Can you should more code (e.g. where/how `getBanners` is called) – David Mar 19 '18 at 08:35
  • @David I added home component source. it work well in client rendering. And there is no error in SSR mode. I made an another api server and it makes logs whenever the function is called. It is only called in client rendering, not SSR. – Jihoon Kwon Mar 19 '18 at 23:58
  • It that component called from a lazy loaded route? And it the console log in the service constructor called server side? – David Mar 20 '18 at 08:19
  • @David I don't use lazy loaded route.. It is so strange :( – Jihoon Kwon Mar 20 '18 at 23:45
  • Its not working for me either. I am using angular 6 and using infinite scroll that fetches the data from the server. Only initial data from resolve is shown , rest all are not shown. – Renil Babu Sep 07 '18 at 07:24
  • 1
    Pure SSR doesn't include "fetching data on server side". React.js Native SSR doesn't support either. But there is another framework: 'next.js' (only for react.js); 'nuxt.js'(only for vue.js) to implement the feature. – Tody.Lu Mar 17 '19 at 01:18
  • This is an old question, but you are sure that the http request isn't being fetched. Cause it does on my SSR however a newer version. You wont actually see it after the page as rendered. Due to it does not carry the data fetchs from the server to the client. The client will rerun your angular compiles JS again. What you could do is append the body of the generated html with received api calls. And when the app is running check if data already exists. If so use that data instead of making a request to the api on app load. – Henrik Bøgelund Lavstsen Mar 15 '22 at 09:42

0 Answers0