在 ssr build 的 ngOnInit 中使用拦截器 - Angular 8

Question

我正在使用拦截器来添加 api headers。我在 ngOnInit 函数中调用了一些 apis。对于正常的 ng 服务，它工作得很好。但是在 ssr build and serve 中，api 没有被调用并且页面没有呈现但显示加载。如果我在 ngOnInit 中评论了 api 调用，它就可以工作。我怎么解决这个问题？？请帮忙

我的component.ts函数

ngOnInit() {
    this.authController.fetchUser
      .subscribe(
        (params) => {
          this.id = +params['id'];
          this.user = this.authController.getUser(this.id)
        }
      );
  }

fetchUser() 是一个 api 使用拦截器的调用函数。此功能在 ssr 构建中不起作用。

Answer 1

根据场景，您似乎在 SSR 代码中使用了与客户端相关的内容，这就是您的 API 未被调用并继续加载的原因。

在使用 SSR 时，保持 platformBrowser 检查代码始终是一个好方法，只需更改如下代码 -

 constructor(private router: Router) { }

 ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.fetchData();
    }
  }

  fetchData() {
    this.authController.fetchUser
      .subscribe((params) => {
        this.id = +params['id'];
        this.user = this.authController.getUser(this.id)
      });
  }

在 ssr build 的 ngOnInit 中使用拦截器 - Angular 8

Usage of interceptor in ngOnInit in ssr build - Angular 8

interceptor

angular-universal

angular

angular8