如何强制 Angular Universal 从外部 api 预渲染内容？

Question

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

@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

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

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

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

const request = require('request');

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