Angular 22: Signal-First
будущее наступило

Обзор: что нового в Angular 22

Разберём каждое нововведение подробно — что оно делает, зачем нужно и как использовать уже сегодня.

1. Signal Forms — стабильные реактивные формы

Самое значительное нововведение Angular 22 — перевод Signal Forms из developer preview в стабильный статус. После месяцев доработок — ленивая инициализация полей, поддержка generic union-типов, debounced async-валидация, сигналы ошибок парсинга, настраиваемое поведение отправки и сброс кастомных контролов — Signal Forms готовы к production.

Signal Forms заменяют template-driven и reactive forms единым сигнал-ориентированным API. Вместо FormControl, FormGroup и FormArray вы получаете реактивные примитивы полей на базе Angular Signals — автоматическое, гранулярное обнаружение изменений без zone.js.

Было (Reactive Forms)

export class LoginComponent {
  form = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', [Validators.required, Validators.minLength(8)]),
  });

  get email() { return this.form.get('email'); }

  onSubmit() {
    if (this.form.valid) {
      this.authService.login(this.form.value);
    }
  }
}

Стало (Signal Forms)

import { signalForm, formField } from '@angular/forms';

export class LoginComponent {
  form = signalForm({
    email: formField('', { validators: [required, email] }),
    password: formField('', { validators: [required, minLength(8)] }),
  });

  // Состояние формы реактивно через Signals
  emailError = computed(() => {
    const field = this.form.controls.email;
    if (field.touched() && field.invalid()) {
      return field.getError('email') ?? 'Неверный email';
    }
    return null;
  });

  onSubmit() {
    if (this.form.valid()) {
      this.authService.login(this.form.value());
    }
  }
}

Ключевые отличия: Signal Forms отслеживают valid, touched, dirty и errors через Signals, а не через observable-потоки. Нет .get() со строковыми путями — поля доступны как типизированные свойства. Схема определения компактна и компонуема, поддерживает вложенные группы, динамические массивы и union-типы на уровне схемы.

2. Angular Aria — встроенная доступность

Angular 22 поставляет Angular Aria как стабильный модуль — комплексный набор примитивов доступности, делающий соответствие WCAG встроенной возможностью фреймворка, а не сторонней библиотекой.

Angular Aria включает директивы для:

• Управления ARIA-атрибутами — автоматическая привязка ARIA-ролей, состояний и свойств на основе семантики компонента
• Клавиатурной навигации — стандартизованное управление фокусом, tab-порядок и обработка клавиш (стрелки, Enter, Escape)
• Объявлений для экранных читалок — уведомления через live region при динамических изменениях контента
• Фокус-ловушек — для модальных окон и оверлеев с поддержкой inert-фона
• Поддержки aria-invalid — автоматическая синхронизация с состоянием валидации форм

import { AriaModule } from '@angular/aria';

@Component({
  selector: 'app-modal',
  standalone: true,
  imports: [AriaModule],
  template: `
    <div role="dialog" ariaModal ariaLabelledBy="modal-title">
      <h2 id="modal-title">Подтверждение</h2>
      <p>Вы уверены, что хотите удалить этот элемент?</p>
      <div class="actions" ariaKeyboardNav>
        <button (click)="confirm()">Удалить</button>
        <button (click)="cancel()">Отмена</button>
      </div>
    </div>
  `
})
export class ConfirmModalComponent {}

3. httpResource — декларативная загрузка данных

httpResource и rxResource — это смена парадигмы в том, как Angular-приложения загружают и управляют данными. Вместо ручного управления жизненным циклом запросов с подписками, флагами загрузки и состояниями ошибок вы объявляете зависимость данных как Signal — Angular делает всё остальное.

import { httpResource } from '@angular/common/http';

@Component({
  selector: 'app-user-profile',
  template: `
    @if (user.isLoading()) {
      <p>Загрузка...</p>
    } @else if (user.error()) {
      <p>Ошибка: {{ user.error() }}</p>
    } @else {
      <h2>{{ user.value().name }}</h2>
      <p>{{ user.value().email }}</p>
    }
  `
})
export class UserProfileComponent {
  userId = input<number>();

  // Декларативно — httpResource реагирует на изменение userId
  user = httpResource<User>(() => `/api/users/${this.userId()}`, {
    defaultValue: { name: '', email: '' }
  });
}

httpResource возвращает объект с тремя реактивными свойствами: value (Signal с данными), isLoading (Signal-флаг загрузки) и error (Signal с ошибкой). При изменении URL ресурс автоматически перезапрашивает данные.

Цепочки зависимых ресурсов через chain()

// Данные команды загружаются после выбора ID
team = httpResource<Team>(() => `/api/teams/${this.selectedTeamId()}`);

// Участники загружаются, когда есть данные о команде
teamMembers = this.team.chain(
      (team) => `/api/teams/${team.id}/members`,
      { defaultValue: [] as Member[] }
    );

// Задачи участников загружаются на основе участников
teamTasks = this.teamMembers.chain(
  (members) => `/api/tasks?assigneeIds=${members.map(m => m.id).join(',')}`,
  { defaultValue: [] as Task[] }
);

Каждый вызов chain() создаёт зависимый ресурс, который автоматически перезапрашивается при изменении родительского. Race conditions обрабатываются — если родительский ресурс перезагружается до завершения дочернего, устаревший запрос отменяется.

4. OnPush по умолчанию

Начиная с Angular 22, компоненты без явного changeDetection по умолчанию используют ChangeDetectionStrategy.OnPush. Это breaking change, который приводит Angular в соответствие с современными реактивными паттернами.

Для сохранения старого поведения укажите явно:

@Component({
  selector: 'app-legacy',
  changeDetection: ChangeDetectionStrategy.Eager,  // было Default
  template: `...`
})
export class LegacyComponent {}

Схема ng update автоматически находит компоненты, полагавшиеся на старое поведение, и добавляет ChangeDetectionStrategy.Eager там, где это необходимо. Если вы уже используете Signals, это изменение будет прозрачным — ваши компоненты уже ведут себя как OnPush.

5. Fetch API как основной HTTP-клиент

Angular 22 переключает HTTP-клиент с XMLHttpRequest на современный Fetch API. HttpClient теперь использует FetchBackend по умолчанию.

// По умолчанию в v22 — Fetch используется автоматически
provideHttpClient()

// Для XHR (прогресс загрузки файлов)
provideHttpClient(withXhr())

withFetch() объявлен устаревшим — он больше не нужен, так как Fetch стал поведением по умолчанию. Схема миграции добавляет withXhr() автоматически для проектов, использовавших provideHttpClient без аргументов.

6. TypeScript 6.0+ и Node.js 22+

Angular 22 прекращает поддержку TypeScript 5.x и Node.js 20. Требуется обновление до:

• TypeScript 6.0 или новее
• Node.js 22 LTS или новее (поддерживается также Node 26)

Схема ng update добавляет "strictTemplates": true в tsconfig и отключает диагностики nullishCoalescingNotNullable и optionalChainNotNullable, которые TS 6.0 может активировать на существующих шаблонах.

7. Другие важные изменения

@Service декоратор

Новый декоратор для сервисов с улучшенной типобезопасностью фабричных функций — более явная альтернатива @Injectable({ providedIn: 'root' }).

injectAsync

Новая функция для асинхронного внедрения зависимостей — полезна для lazy-загрузки сервисов и динамических провайдеров.

Изменения роутера

paramsInheritanceStrategy теперь по умолчанию 'always' — параметры маршрутов наследуются от всех родительских маршрутов. provideRoutes() удалён. Добавлены опции для поведения несоответствующих входных данных компонентов.

Инкрементальная гидратация по умолчанию

Angular 22 включает инкрементальную гидратацию по умолчанию для SSR-приложений — компоненты гидратируются по мере появления в области видимости, сокращая Time to Interactive.

Удалённые API

• ComponentFactoryResolver и ComponentFactory — передавайте классы напрямую в ViewContainerRef.createComponent()
• createNgModuleRef — используйте createNgModule
• ChangeDetectorRef.checkNoChanges — используйте fixture.detectChanges()
• provideRoutes() — используйте provideRouter()
• Hammer.js — интеграция удалена
• ServerXhr — объявлен устаревшим

Миграция: Angular 21 → 22

Пошаговый чеклист для обновления:

1. Обновите Node.js до v22 LTS или новее
2. Обновите TypeScript до v6.0+: npm install typescript@~6.0
3. Запустите schematics: ng update @angular/core@22 @angular/cli@22 — автоматически:
   • Добавит ChangeDetectionStrategy.Eager
   • Обновит provideRoutes() → provideRouter()
   • Настроит provideHttpClient
   • Включит strictTemplates и отключит nullable-диагностики
   • Добавит withXhr() для upload-прогресса
4. Замените ComponentFactory: передавайте классы компонентов напрямую
5. Проверьте валидацию форм: min и max больше не принимают строки
6. Удалите withFetch() из конфигурации провайдеров
7. Протестируйте с OnPush: добавьте ChangeDetectionStrategy.Eager или мигрируйте на Signals

FAQ

Стоит ли обновляться до Angular 22?

Да — для большинства проектов. Signal-first направление — это будущее Angular, и v22 предоставляет стабильную основу для этого перехода:

• Новые проекты: Начинайте с v22. Signal Forms и httpResource — рекомендуемые паттерны.
• Существующие проекты (Angular 18-21): Миграция хорошо автоматизирована. Основная ручная работа — удаление ComponentFactory, которые были объявлены устаревшими ещё в v14.
• Крупные enterprise-кодовые базы: Запланируйте обновление на спринт. OnPush по умолчанию может выявить компоненты, полагавшиеся на мутабельное состояние.

Я занимаюсь Angular-разработкой с Angular 2 (2016) и мигрировал проекты с v2 по v21. Обновление до v22 — одно из самых плавных. Схемы миграции comprehensive, а signal-first архитектура реально улучшает производительность и опыт разработки. Если нужна помощь с миграцией или архитектурой — свяжитесь со мной.