我已经设置并成功使用了Angular5 + SSR。还是蛮不错的。
所有组件都可以在SSR和Non-SSR上正常工作。
还有一些服务可以调用外部HTTP get 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如果我解决了这些问题或找到了好的文档,我将再次对其进行更新。 :)
最佳答案
本文介绍了如何在通用 Angular 范围内进行后端调用。
https://angular.io/guide/universal#absolute-http-urls
关于Angular5服务器端渲染,外部Api数据服务在ssr中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49355650/