Angular v16 Hydration搭配router-outlet无法正常工作的问题求助

你的问题出在路由组件的数据加载时机和Angular Hydration的状态序列化逻辑上，具体原因和修复方案如下：

问题根源 #

Angular Hydration要正常工作，需要服务端渲染时把组件的状态序列化到ng-state脚本标签中，客户端启动时复用该状态避免重复请求。但你当前在ngOnInit中发起API请求，当组件通过路由加载时：

1. 服务端渲染阶段，路由组件的ngOnInit会执行，API请求完成后更新信号状态
2. 但默认情况下，Angular的路由配置没有告诉Hydration系统要序列化该路由组件的状态
3. 客户端启动时，路由会重新初始化组件，触发ngOnInit再次发起请求，导致Hydration失效

修复方案 #

方案1：使用Route Resolver预加载数据 #

通过路由解析器在服务端渲染阶段预加载数据，确保状态被正确序列化：

1. 修改space.service.ts，新增Promise格式的方法：

export interface Person {
  name: string;
  craft: string;
}

@Injectable({
  providedIn: 'root',
})
export class SpaceService {
  http = inject(HttpClient);

  getPeople(): Observable<Person[]> {
    console.log("请求Open Notify API数据");
    return this.http
      .get<any>('http://api.open-notify.org/astros.json')
      .pipe(map((res) => res.people));
  }

  // 新增方法：将Observable转为Promise适配Resolver
  getPeopleAsPromise(): Promise<Person[]> {
    return firstValueFrom(this.getPeople());
  }
}

2. 更新app.config.ts的路由配置，添加Resolver：

const routes: Routes = [
  {
    path: 'hydration',
    component: HydrationComponent,
    resolve: {
      people: () => inject(SpaceService).getPeopleAsPromise()
    }
  }
];
export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient(), provideClientHydration(), provideRouter(routes)]
};

3. 修改hydration.component.ts，从路由快照中获取预加载的数据：

import { ActivatedRoute } from '@angular/router';
import { firstValueFrom } from 'rxjs';

@Component({
  selector: 'app-hydration',
  standalone: true,
  templateUrl: './hydration.component.html',
  imports: [CommonModule],
})
export default class HydrationComponent implements OnInit {
  route = inject(ActivatedRoute);
  peopleInSpace = signal<Person[]>([]);

  ngOnInit(): void {
    // 直接从路由解析结果中获取数据，无需重复发起请求
    this.peopleInSpace.set(this.route.snapshot.data['people']);
  }
}

方案2：配置路由服务端过渡标识 #

在路由配置中添加withServerTransition，明确告知Hydration系统要序列化路由组件状态：

const routes: Routes = [
  {
    path: 'hydration',
    component: HydrationComponent,
  }
];
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideClientHydration(),
    provideRouter(routes, withServerTransition({ appId: 'your-app-id' }))
  ]
};

注意：your-app-id需要和main.server.ts中bootstrapApplication配置的appId保持一致。

验证修复效果 #

修复后访问/hydration路径：

• 开发者工具中不会出现重复的API请求
• <script id="ng-state"...标签中会包含路由组件的状态数据
• Hydration功能正常生效

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