Angular5服务器端渲染,外部Api数据服务在s-s-r中不起作用
Posted
技术标签:
【中文标题】Angular5服务器端渲染,外部Api数据服务在s-s-r中不起作用【英文标题】:Angular5 Server side rendering, external Api data service does not work in s-s-r 【发布时间】:2018-08-27 13:57:03 【问题描述】:我已经成功设置并使用了Angular5 + s-s-r。还是挺好看的。
所有组件都在 s-s-r 和非 s-s-r 上运行良好。 还有一些服务调用外部 HTTP 获取 API 来获取一些数据。 当然,它在非 s-s-r 模式下运行良好。
但是,问题是在 s-s-r 上,节点服务器不支持获取和渲染数据。 我只能在客户端获取和渲染后才能看到获取的数据。
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");
);
我希望在 s-s-r 上节点服务器调用 HTTP 请求数据并将其呈现在 index.html 上,但它不是......
我是否遗漏或误解了?
ps: 报告了相同的问题。 https://github.com/angular/universal/issues/674如果我解决了这些问题或者找到了好的文档,我会再次更新它。 :)
【问题讨论】:
服务器端有错误吗?你是如何检查 API 没有被调用的?您能否提供更多代码(例如,getBanners
的调用位置/方式)
@David 我添加了家庭组件源。它在客户端渲染中运行良好。并且在 s-s-r 模式下没有错误。我制作了另一个 api 服务器,每当调用该函数时它都会生成日志。它只在客户端渲染中调用,而不是 s-s-r。
该组件是从延迟加载的路由中调用的吗?并且控制台登录称为服务器端的服务构造函数?
@David 我不使用延迟加载的路由.. 太奇怪了:(
纯 s-s-r 不包括“在服务器端获取数据”。 React.js Native s-s-r 也不支持。但是还有另一个框架:'next.js'(仅适用于 react.js); 'nuxt.js'(仅适用于 vue.js)来实现该功能。
【参考方案1】:
本文解释了如何在 Angular Universal 中进行后端调用。 https://angular.io/guide/universal#absolute-http-urls
【讨论】:
是的,我已经检查了文档,但找不到任何我错过的具体内容。 :(。所有的url路径都是绝对路径。以上是关于Angular5服务器端渲染,外部Api数据服务在s-s-r中不起作用的主要内容,如果未能解决你的问题,请参考以下文章