Angular5服务器端渲染，外部Api数据服务在ssr中不起作用答案

【问题标题】：Angular5 Server side rendering, external Api data service does not work in ssrAngular5服务器端渲染，外部Api数据服务在ssr中不起作用
【发布时间】：2018-08-27 13:57:03
【问题描述】：

我已经成功设置并使用了Angular5 + SSR。还是挺好看的。

所有组件都在 SSR 和非 SSR 上运行良好。还有一些服务调用外部 HTTP 获取 API 来获取一些数据。当然，它在非 SSR 模式下运行良好。

但是，问题是在 SSR 上，节点服务器不支持获取和渲染数据。我只能在客户端获取和渲染后才能看到获取的数据。

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");
            });
    }

}

我希望在 SSR 上节点服务器调用 HTTP 请求数据并将其呈现在 index.html 上，但它不是......

我是否遗漏或误解了？

ps：报告了相同的问题。 https://github.com/angular/universal/issues/674如果我解决了这些问题或者找到了好的文档，我会再次更新它。 :)

【问题讨论】：

服务器端有错误吗？你是如何检查 API 没有被调用的？您能否提供更多代码（例如，getBanners 的调用位置/方式）
@David 我添加了家庭组件源。它在客户端渲染中运行良好。并且在 SSR 模式下没有错误。我制作了另一个 api 服务器，每当调用该函数时它都会生成日志。它只在客户端渲染中调用，而不是 SSR。
该组件是从延迟加载的路由中调用的吗？并且控制台登录称为服务器端的服务构造函数？
@David 我不使用延迟加载的路由.. 太奇怪了:(
纯 SSR 不包括“在服务器端获取数据”。 React.js Native SSR 也不支持。但是还有另一个框架：'next.js'（仅适用于 react.js）； 'nuxt.js'（仅适用于 vue.js）来实现该功能。

标签： angular server-side-rendering angular-universal

【解决方案1】：

本文解释了如何在 Angular Universal 中进行后端调用。 https://angular.io/guide/universal#absolute-http-urls

【讨论】：

是的，我已经检查了文档，但找不到任何我错过的具体内容。 :(。所有的url路径都是绝对路径。