Angular5 рендеринг на стороне сервера, внешняя служба данных API не работает в ssr

Я установил и успешно использовал 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 Если я решу эти проблемы или найду хороший документ, я обновлю его снова. :)

Вы получаете какие-либо ошибки на стороне сервера? Как вы проверяли, что API не вызывается? Можете ли вы больше кода (например, где / как называется getBanners)

David 19.03.2018 09:35

@David Я добавил источник домашнего компонента. он хорошо работает в клиентском рендеринге. И в режиме SSR ошибки нет. Я сделал еще один сервер api, и он ведет журналы всякий раз, когда вызывается функция. Он вызывается только при рендеринге клиента, а не в SSR.

Jihoon Kwon 20.03.2018 00:58

Это тот компонент, который вызывается из ленивого загруженного маршрута? И это консольный журнал в конструкторе службы, называемый серверной стороной?

David 20.03.2018 09:19

@David Я не использую ленивую загрузку маршрута .. Это так странно :(

Jihoon Kwon 21.03.2018 00:45

У меня это тоже не работает. Я использую angular 6 и использую бесконечную прокрутку, которая извлекает данные с сервера. Отображаются только исходные данные из разрешения, все остальные не отображаются.

Renil Babu 07.09.2018 09:24

Чистый SSR не включает «получение данных на стороне сервера». React.js Native SSR тоже не поддерживает. Но есть и другой фреймворк: next.js (только для react.js); 'nuxt.js' (только для vue.js), чтобы реализовать эту функцию.

Tody.Lu 17.03.2019 02:18
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
12
6
5 180
1

Ответы 1

В этой статье объясняется, как выполнять бэкэнд-вызовы в angular universal. https://angular.io/guide/universal#absolute-http-urls

Да, я уже проверял документ, но не нашел конкретных вещей, которые пропустил. :(. Все URL-адреса являются абсолютными.

Jihoon Kwon 20.03.2018 01:08

Другие вопросы по теме