Angular 16中弃用的withServerTransition如何替换？

问题原因 #

你之前的错误是把提供者配置直接放到了imports数组中——imports仅支持导入模块类/模块实例，提供者配置必须放在providers数组里。

正确配置方式 #

Angular 16+ 中，withServerTransition的功能已被整合到provideClientHydration()，同时APP_ID的配置需要放到providers中，分两种项目结构处理：

1. 基于NgModule的项目

在app.module.ts中调整配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_ID } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule
    // 仅放置模块，不要添加提供者配置
  ],
  providers: [
    { provide: APP_ID, useValue: 'serverApp' } // 提供者配置放在这里
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 基于独立组件的项目

在启动文件（通常是main.ts）中通过bootstrapApplication配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideClientHydration } from '@angular/platform-browser';
import { APP_ID } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(), // 替代原withServerTransition的核心配置
    { provide: APP_ID, useValue: 'serverApp' }
  ]
});

补充说明 #

provideClientHydration()会自动处理服务端渲染后的客户端 hydration 逻辑，完全替代了旧的withServerTransition功能，而APP_ID用于确保服务端和客户端的应用标识一致，避免 hydration 时出现不匹配问题。

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