Angular 5 Universal ожидает возврата http-запроса во время рендеринга на стороне сервера

Question

У меня есть приложение Angular 5, которое обслуживается с помощью ngExpressEngine (последовал за начальным проектом Angular Universal). В моем приложении есть компонент, который отправляет HTTP-запрос на получение данных для отображения. Все работает правильно, но когда я использую fetch как робот Google, он возвращает отображаемую страницу, но не данные. Можно ли заставить сервер ngExpressEngine ждать HTTP-запросов, прежде чем вернуть страницу пользователю?

Answer 1

Я не знаю об Angular 5, но с последней версией Angular (7.2 на момент написания этой статьи) я могу подтвердить, что все данные, загруженные через Resolve правильно отображается на стороне сервера, а также все данные, загруженные через ngOnInit перехватывает, даже если он асинхронный.

Это работает благодаря Zone.js, действительно, он отслеживает все асинхронные операции и испускает onMicrotaskEmpty событие, когда очередь асинхронных задач пуста, чтобы сообщить Angular, что страница готова к визуализации. Для справки: что такое использование Zone.js в Angular 2

Answer 2

Вы можете использовать APP_INITIALIZER в своем провайдере, чтобы отложить инициализацию приложения до тех пор, пока ваш api не будет извлечен из модуля клиентского приложения, например:

//app.module.ts
        providers: [{provide: APP_INITIALIZER, deps: [HttpClient], multi: true,
    useFactory: (http: HttpClient: Promise) => new Promise<Your Data Interface>((resolve, reject) => http.get("").pipe(map(data => {
     //do something with data
resolve(data)
    }), catchError(error => of(error).pipe(map(() => //do something if error)))))}]