Why my app stuck at loading when run ng serve?

My Angular (version 17) app has a strange issue. When I call an API service inside my component, the page gets stuck at loading — nothing renders. However, if I comment out the API call, the app loads normally. Even more strangely: when I open a second browser tab with the same link, the page suddenly appears correctly.

Here's my component code:

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);
}
});
};
}


This is my app.config.ts:

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


I have tried cleaning .angular/cache, node_modules, and reinstalling — but nothing helps.

Any ideas why the UI does not render after the API request, unless I open a second tab?

Continue reading...