Angular 17应用调用API后页面加载停滞，新开标签页才正常的问题求助

各位大佬好，我最近碰到一个特别诡异的Angular 17应用问题，折腾好久没解决，来求助大家：

我的Angular 17应用里，当在组件内调用API服务时，页面会一直卡在加载状态，完全不渲染任何内容。但如果我把API调用的代码注释掉，应用就能正常加载显示。更奇怪的是，当我用同一个链接打开第二个浏览器标签页时，原本卡住的页面居然突然能正常显示了！

下面是我的组件代码：

export class BlogComponent implements OnInit {
  blogs: Blog[] = [];

  constructor(private blogSrv: BlogService) {}

  ngOnInit(): void {
    this.onLoad();
  }

  onLoad = async () => {
    await this.blogSrv.fetchList$({ page: 1, limit: 10 }).subscribe({
      next: (res) => {
        if (res.total > 0) {
          this.blogs = res.data;
        }
      },
      error: (err) => {
        console.log("Error", err);
      }
    });
  };
}

还有我的app.config.ts配置：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(withInterceptorsFromDi()),
    { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true },
    provideAnimations()
  ]
};

我已经试过清理.angular/cache目录、删除node_modules后重新安装依赖，但这些操作都没能解决问题。有没有大佬能帮我分析下，为什么调用API后UI就不渲染，只有新开标签页才正常呢？

内容来源于stack exchange