Angular 5 Universal 在服务器端渲染期间等待 http 请求返回

Posted 2023-02-19

【中文标题】Angular 5 Universal 在服务器端渲染期间等待 http 请求返回

【英文标题】：Angular 5 Universal wait for http request to return during server-side render

【发布时间】：2018-06-14 18:21:09

【问题描述】：

我有一个使用 ngExpressEngine 提供的 Angular 5 应用程序（遵循 Angular Universal 入门项目）。我的应用程序有一个组件，它发出 HTTP 请求以获取要显示的一些数据。一切正常，但是当我使用 fetch 作为谷歌机器人时，它返回呈现的页面，但没有任何数据。是否让 ngExpressEngine 服务器在将页面呈现给用户之前等待 HTTP 请求？

【问题讨论】：

刚刚遇到这个A dockerized, headless Chrome rendering solution，正在寻找另一个问题的答案。它看起来有点复杂，但似乎针对您遇到的问题。

什么时候发出http请求？

我们可以看看你的服务器端代码吗？

server side 是什么意思？它是 Angular 通用的。检查我的评论github.com/angular/universal-starter/issues/…

服务器端是指在快速服务器中渲染

【参考方案1】：

您可以在提供程序中使用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)))))]

【参考方案2】：

我不了解 Angular 5，但是使用最新的 Angular 版本（我写这篇文章时是 7.2），我可以确认通过 Resolve 加载的所有数据都在服务器端正确呈现，而且通过ngOnInit钩子加载的所有数据，即使它是异步的。

这要归功于 Zone.js，事实上，它会跟踪所有异步操作并在异步任务队列为空时发出 onMicrotaskEmpty 事件，让 Angular 知道页面已准备好呈现。供参考：what is the use of Zone.js in Angular 2