Я установил и успешно использовал 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.info('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.info("bannerList result : ", result);
this.bannerList = result;
},
error => {
console.error("bannerList error: ", error);
},
() => {
console.info("bannerList completed");
});
}
}
Я ожидал, что в SSR сервер узла вызывает данные HTTP-запроса и отображает их на index.html, но это не так ...
Я упустил или неправильно понял?
пс: Сообщается о тех же проблемах. https://github.com/angular/universal/issues/674 Если я решу эти проблемы или найду хороший документ, я обновлю его снова. :)
@David Я добавил источник домашнего компонента. он хорошо работает в клиентском рендеринге. И в режиме SSR ошибки нет. Я сделал еще один сервер api, и он ведет журналы всякий раз, когда вызывается функция. Он вызывается только при рендеринге клиента, а не в SSR.
Это тот компонент, который вызывается из ленивого загруженного маршрута? И это консольный журнал в конструкторе службы, называемый серверной стороной?
@David Я не использую ленивую загрузку маршрута .. Это так странно :(
У меня это тоже не работает. Я использую angular 6 и использую бесконечную прокрутку, которая извлекает данные с сервера. Отображаются только исходные данные из разрешения, все остальные не отображаются.
Чистый SSR не включает «получение данных на стороне сервера». React.js Native SSR тоже не поддерживает. Но есть и другой фреймворк: next.js (только для react.js); 'nuxt.js' (только для vue.js), чтобы реализовать эту функцию.





В этой статье объясняется, как выполнять бэкэнд-вызовы в angular universal. https://angular.io/guide/universal#absolute-http-urls
Да, я уже проверял документ, но не нашел конкретных вещей, которые пропустил. :(. Все URL-адреса являются абсолютными.
Вы получаете какие-либо ошибки на стороне сервера? Как вы проверяли, что API не вызывается? Можете ли вы больше кода (например, где / как называется
getBanners)