当前位置： 正文

如何升级到 Angular 20?

Angular 2025-06-02

随着 Angular 20 的发布，带来了令人兴奋的新特性，如稳定的 Signals API 和无 Zone 变更检测（zoneless change detection）。但并非简单一步到位，需要一些规划。以下是详细的升级步骤、代码示例及常见问题，助你顺利升级。

如何升级到 Angular 20?

前置条件

  1. Node.js v20：Angular 20 不再支持 Node 18。请用 node -v 检查。
  2. TypeScript 5.8：通过 npm install typescript@5.8 升级。
  3. 备份项目：建议使用 Git 提交所有更改后再操作。

步骤 1：升级 Angular CLI

升级全局 CLI 到 v20：

npm uninstall -g @/cli
npm install -g @angular/cli@20

用 ng version 验证版本。

步骤 2：升级项目依赖

运行 Angular 更新工具：

ng update @angular/core@20 @angular/cli@20

这会自动更新 package.json 并应用如下迁移：

  • 将 TestBed.get() 替换为 TestBed.inject()
  • 将 ngIf、ngFor、ngSwitch 迁移到新的控制流语法

迁移示例：

  

{{ user.name }}
  

  
@if (user) {  
  
{{ user.name }}
  
}

步骤 3：解决不兼容变更

结构型指令已弃用

Angular 20 弃用了 ngIf、ngFor、ngSwitch，请使用新控制流语法：

@for (item of items; track item.id) {  
  
{{ item.name }}
  
}

TestBed.get() 移除

替换已弃用的调用方式：

// 旧写法
const service = TestBed.get(UserService);

// 新写法
const service = TestBed.inject(UserService);

表单 API 更新

现在可用 markAllAsDirty() 等新方法：

this.userForm.markAllAsDirty();

步骤 4：启用实验性特性（可选）

无 Zone 变更检测

在 app.config.ts 中添加：

import { provideZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [provideZonelessChangeDetection()]
};

注意：如使用第三方库，可能需手动触发变更检测。

基于 Signal 的表单（开发者预览）

实验性表单 API 示例：

const name = signal('');
const isValid = computed(() => name().length > 2);

步骤 5：更新 Browserslist 配置

Angular 20 仅支持最近 30 个月内发布的浏览器。请更新 .browserslistrc：

Chrome >= 107
Firefox >= 104
Safari >= 16

步骤 6：测试与优化

  1. 运行测试：Angular 20 弃用 Karma，建议迁移到 Web Test Runner 或 Vitest。
  2. 检查包体积：用 ng build --stats-json 配合 webpack-bundle-analyzer 分析。
  3. 验证 SSR：用 ng serve --ssr 测试服务端渲染。

升级后检查清单

  • 如使用 Angular Material/Material UI，请同步升级。
  • 确保第三方库（如 NgRx、RxJS）兼容。

在 tsconfig.json 启用更严格的 TypeScript 检查：

{
  "compilerOptions": {
    "strict": true
  }
}

常见问题排查

  • “Cannot find module” 错误：删除 node_modules 和 package-lock.json，重新 npm install。
  • Zone.js 警告：如用 zoneless 模式，在 provideZonelessChangeDetection() 里加 ngZone: 'noop'。
  • 老旧浏览器支持：如需兼容旧浏览器，请调整 .browserslistrc（但会增大包体积）。

结语

升级到 Angular 20 可获得更高性能和现代响应式模式。按上述步骤操作，可规避大部分不兼容问题，充分利用 Signals 和无 Zone 应用等新特性。对于大型团队，建议实验性 API 逐步采用，降低风险。

需要帮助？

赏