Angular 21 — 新功能与变更

Source: Dev.to

Standalone Components vs. NgModules

Old Way (NgModule‑based)

@NgModule({
  declarations: [UserComponent],
  imports: [CommonModule],
})
export class UserModule {}

Angular 21 Way (Standalone)

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  template: `
## User Works!
`
})
export class UserComponent {}

Benefits

• 更少的样板代码
• 清晰的依赖关系
• 更容易的懒加载

Signals for State Management

替代 BehaviorSubject

// Before (RxJS)
user$ = new BehaviorSubject(null);

// Angular 21 Signals
user = signal(null);

setUser(data: User) {
  this.user.set(data);
}

在模板中使用 signal

Welcome {{ user()?.name }}

• 无需订阅，无内存泄漏，响应式干净。

Computed Signals

firstName = signal('Mridu');
lastName  = signal('Dixit');

fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

### {{ fullName() }}

Angular 会在任意依赖变化时自动重新计算。

Effects

effect(() => {
  console.log('User changed:', this.user());
});

Signals 的常见使用场景

• 分析追踪
• API 调用
• 日志记录
• 同步 localStorage

Zoneless Mode（可选）

在引导应用时启用无区（zoneless）变更检测：

bootstrapApplication(AppComponent, {
  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
});

结果

• 更快的变更检测
• 更可预测的更新

Signals + zoneless 模式在无需额外配置的情况下提供性能提升——Angular CLI 会自动处理。

你会注意到的变化

• 更快的 ng serve
• 更快的重建
• 更低的内存使用（尤其在大型项目中）

Server‑Side Rendering (SSR) 改进

Server Component 示例

@Component({
  standalone: true,
  template: `
Data loaded on server
`
})
export class ServerOnlyComponent {}

Angular 21 改进了：

• 水合不匹配处理
• 异步数据一致性
• 调试体验

结果 → 更可靠的 SSR 应用。

Provider Scopes

全局 Provider

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

组件级 Provider

@Component({
  standalone: true,
  providers: [UserService]
})
export class UserComponent {}

作用域更清晰，意外情况更少。

Build‑Time Checks

Angular 现在在构建时捕获无效的模板绑定：

{{ user.nonExistingProp }}

• 再也没有静默的运行时错误。

Compatibility and Migration

• 现有的 RxJS 代码仍然可以工作。
• NgModules 仍受支持。
• 可以增量迁移到 signals——不必重写所有代码。

New Angular Projects

Angular 21 强调清晰和信心：

• 首选独立（standalone）架构
• 使用 signals 进行状态管理
• 可选的无区性能模式
• 更快的构建
• 更简洁的思维模型

Angular 不再“沉重”——它是现代的、响应式的、可用于生产的。