Angular Signals异常：模板始终显示else内容，SSR相关问题排查

一、Loading状态异常的核心原因与修复 #

你的代码中loading信号初始值为false，且仅在请求完成后设置为false，完全缺失了请求开始时将loading设为true的逻辑。这就导致页面初始化时直接显示"Loaded !"，只有当客户端重新触发请求时才会短暂出现Loading（随后又变回Loaded）；结合SSR场景，服务端渲染时请求已完成，客户端hydrate后初始状态仍是Loaded，进一步加剧了这个问题。

修改后的组件代码 #

loading = signal(false);

competition = toSignal(
    this.competitionId$.pipe(
      switchMap(id => {
        // 请求开始时设置loading为true
        this.loading.set(true);
        return this.competitionService.getCompetitionById(id)
          .pipe(tap((v) => {
            this.loading.set(false);
            console.log('loaded', v);
          }))
      }),
      catchError(err => this.handleFetchError(err)),
      // 确保流结束时（包括错误）也重置loading
      finalize(() => this.loading.set(false))
    ),
    { initialValue: undefined }
  );

• 添加finalize操作符：确保请求出错时loading也能重置为false，避免一直显示Loading。
• 在switchMap内先设置loading为true：保证每次触发请求时立即切换Loading状态。

SSR场景补充说明 #

如果是服务端预渲染完成了数据请求，客户端hydrate后会直接继承服务端的loading=false状态，这是SSR的正常行为（用户打开页面直接看到内容，无需加载）。只有当客户端触发新的请求（比如路由跳转、参数变化）时，才会显示Loading状态。

二、控制台错误修复 #

1. 服务器端Can't bind to 'formGroup'错误 #

这是因为当前组件所在的模块未导入ReactiveFormsModule（或FormsModule）。在对应模块的imports数组中添加：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入
    ReactiveFormsModule
  ]
})
export class YourModule { }

2. 浏览器端Cannot read properties of null (reading 'removeChild')错误 #

该错误通常是SSR hydration时DOM不匹配导致的，常见解决方法：

• 检查模板中是否有服务端与客户端环境差异的DOM生成逻辑（比如依赖window、document的代码），确保服务端渲染的DOM和客户端hydrate后的DOM完全一致。
• 使用平台判断避免服务端渲染客户端专属内容：

  import { isPlatformBrowser } from '@angular/common';
  import { Inject, PLATFORM_ID } from '@angular/core';
  
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
  get isBrowser() {
    return isPlatformBrowser(this.platformId);
  }
  

  模板中：

  @if(isBrowser) {
    <!-- 仅在客户端渲染的内容 -->
  }
  

• 临时关闭严格hydration检查（不推荐长期使用）：在app.config.ts中添加：

  provideClientHydration({
    disableHydrationValidation: true
  })
  

内容的提问来源于stack exchange，提问作者Auloma