APP_INITIALIZER 在 Angular 17 中存在 SSR 问题

Question

伙计们。当我尝试迁移到 Angular 17 中的 SSR 时遇到问题。我的应用程序在 Angular 16 中仅是客户端。 我有一个名为 CiyuanEnvironmentService 的服务和另一个名为 LiveService 的服务。 LiveService访问与HttpClient异步加载的CiyuanEnvironmentService环境属性，我将该方法设置为工厂方法或APP_INITIALIZER。 在非 SSR 中，它将在 LiveService 访问它之前完成。但在SSR中，似乎它会在准备好之前访问它。 我该如何解决？或者还有其他的SSR吗？谢谢你。

    CiyuanEnvironmentService,
    {
      provide: APP_INITIALIZER,
      useFactory: (ciyuanEnvironmentService: CiyuanEnvironmentService) => () => ciyuanEnvironmentService.loadEnvironment(),
      deps: [CiyuanEnvironmentService],
      multi: true
    }

看来我应该将它与SSR一起使用。

  loadEnvironment() {
    let ret = this.httpClient.get<CiyuanEnvironment>(environment.ciyuanEnvironmentFile)
    ret.subscribe(config => {
      this.environment = config;
    });
    return ret;
  }

以前，这仅适用于客户端应用程序。

  loadEnvironment() {
    return this.httpClient.get<CiyuanEnvironment>(environment.ciyuanEnvironmentFile).subscribe(config => {
      this.environment = config;
    });
  }

这是故意的吗？

Answer 1

您不应该返回订阅，而应该返回 Promise。试试这个：

loadEnvironment() {
    return firstValueFrom(this.httpClient.get<CiyuanEnvironment>(environment.ciyuanEnvironmentFile))
    .pipe(tap(config => this.environment = config))
  }