我如何强制 Angular Universal 到 pre-render 来自外部 api 的内容？

Question

我想使用 SSR 改进我的 angular 单页应用程序的搜索引擎优化。我通过使用 Angular-Universal 启用了 SSR，它正在为静态 html 提供服务，但我的组件严重依赖异步 api 调用来构建页面上的内容。请参阅下面的示例，其中 $obs 在 ngOnInit 函数中初始化，然后与 html 中的 async 管道一起使用以提取数据。我遇到的问题是 SSR 提供的静态 html 不包括任何使用 async 管道的内容，这些调用是在客户端进行的，然后加载内容。这不是我想要的，因为我需要 api 调用中的内容来生成元标记。是否可以强制 angular universal 等待 api 调用完成，使用此数据渲染 html，然后提供静态 html？

@Component({
  selector: 'app-example-component',
  template: `
    <div *ngIf="(obs$ | async) as model">
      {{model.title}}
    </div>
  `
})
export class ExampleComponent implements OnInit {

  obs$: Observable<SomeModel>;

  constructor(private exampleHttpService: ExampleHttpService) {}

  ngOnInit() {
    this.obs$ = this.exampleHttpService.doSomeApiCall();
  }
}

我希望 SSR 使用 api 调用中的标题呈现模板 html，然后提供静态 html.

Answer 1

我最终解决了由两个不同问题引起的问题：

第一个问题：在我的示例组件中没有显示，但它是我的实际代码，我在 ngOnInit 方法的第一行修改 document 对象，当运行会导致服务器端渲染在到达 http 调用之前失败。

第二个问题：删除 document 的使用后，我需要向我的 server.ts 文件添加 api 路由以将请求代理到后端 @Brandon建议。

const request = require('request');

app.get('/api/**', (req, res) => {
  const url = `${backendUrl}${req.originalUrl}`;
  request(url).pipe(res);
});

我如何强制 Angular Universal 到 pre-render 来自外部 api 的内容？

How can I force Angular Universal to pre-render content from an external api?

http

server-side-rendering

angular-universal

angular