Angular 16 Universal SSR升级报错：this.delegate.createRenderer不是函数

核心错误：TypeError: this.delegate.createRenderer is not a function #

这个错误源于Angular 16对动画渲染器的初始化逻辑调整，多由BrowserAnimationsModule与SSR环境冲突导致，修复步骤：

• 修改app.server.module.ts，移除BrowserAnimationsModule，替换为NoopAnimationsModule：

  import { NoopAnimationsModule } from '@angular/platform-browser/animations';
  
  @NgModule({
    imports: [
      // 移除 BrowserAnimationsModule
      NoopAnimationsModule,
      // 其他已有模块
    ]
  })
  export class AppServerModule {}
  

• 在app.module.ts中，仅在浏览器环境加载BrowserAnimationsModule：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { isPlatformBrowser } from '@angular/common';
  import { PLATFORM_ID, NgModule } from '@angular/core';
  
  @NgModule({
    imports: [
      // 其他已有模块
    ],
    providers: [
      {
        provide: BrowserAnimationsModule,
        useFactory: (platformId: object) => {
          return isPlatformBrowser(platformId) ? BrowserAnimationsModule : NoopAnimationsModule;
        },
        deps: [PLATFORM_ID]
      }
    ]
  })
  export class AppModule {}
  

• 清理依赖与构建缓存后重新编译：

  rm -rf node_modules dist package-lock.json
  npm install
  npm run build:ssr
  npm run serve:ssr
  

路由配置错误：NG04014: Invalid configuration of route ':category/:subCategory': path and matcher cannot be used together #

Angular 16严格禁止同一路由同时设置path和matcher，找到对应路由配置文件（通常是app-routing.module.ts），二选一调整：

// 错误示例
{
  path: ':category/:subCategory',
  matcher: customMatcher,
  component: CategoryComponent
}

// 修复方案1：仅保留path
{
  path: ':category/:subCategory',
  component: CategoryComponent
}

// 修复方案2：仅保留matcher
{
  matcher: customMatcher,
  component: CategoryComponent
}

未定义属性错误：Cannot read properties of undefined (reading 'redirects') #

该错误多发生在路由守卫或解析器中，访问未初始化的路由配置属性导致，添加可选链操作确保安全访问：

// 错误示例
canActivate(route: ActivatedRouteSnapshot): boolean {
  if (route.routeConfig.redirects.length > 0) {
    // 业务逻辑
  }
}

// 修复后
canActivate(route: ActivatedRouteSnapshot): boolean {
  if (route.routeConfig?.redirects?.length > 0) {
    // 业务逻辑
  }
}

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