Angular 21 RC.0 shipped in early October 2025, with the stable release scheduled for November 19. Angular 21 is the next major after Angular 20, and its core goal is promoting Signal Forms from developer preview to stable, along with improvements to the routing API.
本文基于 Angular 21 RC，正式版可能有细微差异。
Signal Forms 正式稳定
Angular 21 将 Signal Forms 提升为稳定 API，意味着可以在生产环境放心使用：
typescript
import { formGroup, formControl, Validators } from "@angular/forms";
// Angular 21：Signal Forms API 正式稳定，不再标记 @developer-preview
@Component({
standalone: true,
imports: [SignalFormsModule],
template: `
<form [sfGroup]="form" (ngSubmit)="submit()">
<input [sfControl]="form.controls.name" placeholder="姓名" />
<input
[sfControl]="form.controls.email"
type="email"
placeholder="邮箱"
/>
<button [disabled]="form.invalid()">提交</button>
</form>
<!-- 实时统计（展示 Signal Forms 的响应式优势）-->
<p>表单完成度：{{ completionRate() }}%</p>
`,
})
export class ContactFormComponent {
form = formGroup({
name: formControl("", [Validators.required]),
email: formControl("", [Validators.required, Validators.email]),
phone: formControl(""),
company: formControl(""),
});
// 基于 Signal Forms 的派生计算
completionRate = computed(() => {
const controls = Object.values(this.form.controls);
const filled = controls.filter((c) => c.value() !== "").length;
return Math.round((filled / controls.length) * 100);
});
}
全新路由 Resolve API：基于 resource()
Angular 21 将路由 Resolve（数据预加载）与 resource() 深度集成：
typescript
// app.routes.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: 'users/:id',
component: UserDetailComponent,
// 新的 resource resolve：返回 resource 而非 Observable/Promise
resolve: {
user: (route) => httpResource<User>(`/api/users/${route.params['id']}`),
}
}
];
// 组件中访问
@Component({ standalone: true, ... })
export class UserDetailComponent {
private routeData = inject(ActivatedRoute).data;
// 直接获取 resource，可以访问 loading/error/value 状态
userResource = toSignal(this.routeData.pipe(map(d => d['user'])));
}
路由级 Meta 支持（原生 SEO）
Angular 21 内置了路由级元数据注入，无需 Angular Meta 服务：
typescript
export const routes: Routes = [
{
path: "about",
component: AboutComponent,
data: {
meta: {
title: "关于我们 - My App",
description: "了解我们的团队和使命",
og: {
title: "关于我们",
image: "/assets/og-about.jpg",
},
},
},
},
];
typescript
// app.component.ts：自动注入路由 meta
@Component({
standalone: true,
imports: [RouterOutlet, RouterMeta], // 新指令
template: `
<router-meta />
<!-- 自动根据当前路由 data.meta 更新 <head> -->
<router-outlet />
`,
})
export class AppComponent {}
Angular 21 主要变化概览
特性 Angular 20 Angular 21
────────────────────────────────────────────────────────────
Signal Forms 开发者预览 正式稳定 ✅
resource() / httpResource() 开发者预览 正式稳定 ✅
Zoneless 正式稳定 继续优化性能
linkedSignal 开发者预览 正式稳定 ✅
路由 resource resolve 无 开发者预览
路由级 Meta 无 开发者预览
zone.js 废弃警告 否 新项目警告 ⚠️
Signal Forms 迁移路线
Angular 21 提供了从 ReactiveFormsModule 迁移的 schematic：
bash
# 自动迁移（Angular 21 RC）
ng generate @angular/forms:signal-forms-migration
# 该 schematic 会：
# 1. 将 FormControl → formControl()
# 2. 将 FormGroup → formGroup()
# 3. 将 this.form.get('x').value → this.form.controls.x.value()
# 4. 将 this.form.valueChanges → toObservable(this.form.value)
注意：自动迁移只处理简单情况，复杂的自定义 validator、动态 FormArray 需要手动迁移。
升级到 Angular 21 RC
bash
ng update @angular/core@21-rc @angular/cli@21-rc
# 注意：Angular 21 会对仍在使用 zone.js 的新项目显示弃用警告
# 不影响运行，但会在构建时打印提示
Summary
Angular 21 RC 是 Signal 化转型的收尾版本——Signal Forms 稳定意味着 Angular 的整个组件 API（输入、输出、查询、表单）都完成了 Signal 化。结合 Zoneless，Angular 的变更检测从"全局拦截"演进到"精准响应"。正式版 11 月发布，RC 阶段适合在预生产环境全面测试迁移路径。