Как релиз Angular v22 упрощает интеграцию ИИ и повышает стабильность приложений

Google выпустила Angular v22 — один из самых насыщенных релизов за последнее время. Вектор развития фреймворка заметно сместился в сторону идеи «веб-технологии для всех»: больше стабильности, новые дефолты и явное движение в сторону ИИ, с помощью которого воплотить свою идею в реальность стало проще, чем это было несколько лет назад.

Глобально можно разделить изменения на три смысловые части: стабилизация API, инструменты для интеграции ИИ, а также комплексное улучшение DX.

Стабильные API для продакшена

Одной из главных особенностей релиза стала стабилизация трех важных API, которые теперь полностью готовы к использованию в продакшене под высокими нагрузками. 

Новое решение Signal Forms объединило строгую типизацию форм с реактивностью сигналов. В стабильной версии этот инструмент получил полную поддержку Angular Material и Angular Aria, что расширяет возможности их интеграции и обеспечивает более комфортный пользовательский опыт.

Сам пакет Angular Aria, содержащий готовые паттерны доступности для создания инклюзивных интерфейсов, также перешел в стабильный статус и получил поддержку готовых харнесов для компонентов. 

Кроме того, разработчики стабилизировали Resource API, включая инструменты resource, rxResource и httpResource. Они позволяют использовать все преимущества асинхронной неблокирующей реактивности, сохраняя при этом привычный синхронный синтаксис сигналов. В версии v22 эти инструменты получили поддержку функции chain() для связанных запросов и кеширование ресурсов при серверном рендеринге. 

Робот и симфонию сочинит, и логи проанализирует

Конечно, не обошлось и без нововведений, связанных с искусственным интеллектом. В Angular v22 был обновлен MCP (Model Context Protocol): добавлены новые инструменты для прямого взаимодействия с dev-сервером. 

Теперь ИИ-агенты могут программно запускать и останавливать сервер через команды devserver.start и devserver.stop, а также собирать приложение с помощью devserver.wait_for_build и анализировать логи для исправления ошибок.

Чтобы передавать моделям актуальный контекст, команда Angular подготовила стандартизированные наборы правил Angular Agent Skills. Базовый навык angular-developer снабжает модели лучшими практиками и руководствами по написанию современных Angular-приложений, angular-new-app помогает агенту настроить локальное окружение для Angular-разработки, а Contributor Skills объясняют внутреннюю архитектуру фреймворка для контрибьюторов.

На достигнутом команда не остановилась и решила поэкспериментировать с WebMCP. Протокол позволяет ИИ-агентам напрямую взаимодействовать со структурированными инструментами внутри браузера и автоматически генерировать их на основе динамических Signal Forms.

Кроме того, в веб-интерфейсе Google AI Studio и песочнице Gemini теперь можно выбрать Angular в панели конфигурации, чтобы быстро генерировать и редактировать прототипы приложений с помощью простых промптов.

Быстрее, выше, сильнее. Улучшения DX

Изменения коснулись роутера и механизма внедрения зависимостей. Роутер Angular теперь автоматически перехватывает все навигационные запросы, использует нативное поведение прокрутки браузера без влияния на размеры бандлов и интегрируется с нативным жизненным циклом навигации.

Конфигурация withExperimentalAutoCleanupInjectors позволяет автоматически избавляться от инжекторов для неактивных роутеров. Если сообщество положительно оценит нововведение, этот механизм может стать поведением по умолчанию в будущих релизах. 

Новая утилита destroyDetachedRouteHandle позволяет корректно удалять компоненты из кешированных роутов без использования сложных обходных путей вроде приведения непрозрачного дескриптора к типу any для ручного вызова componentRef.destroy().

На смену паттерну @Injectable({ providedIn: 'root' }) пришел более лаконичный декоратор @Service, который упрощает определение глобальных синглтонов. Однако старый декоратор @Injectable по-прежнему сохраняется для случаев, требующих глубокой настройки внедрения зависимостей. 

Для эффективной работы с крупными зависимостями разработчики представили функцию injectAsync. Она поддерживает асинхронный импорт и внедрение зависимостей, позволяя разделять код (code splitting) и откладывать загрузку тяжелых модулей до момента их фактического вызова. 

Пример использования:

export class Report {
 private exporter = injectAsync(() => import('./report-exporter'), {
   prefetch: onIdle,
 });
}

Старый друг лучше новых двух — то же можно сказать про практики, проверенные временем. Важным архитектурным изменением стал переход на стратегию обнаружения изменений OnPush по умолчанию для всех новых приложений. Прежний дефолт ChangeDetectionStrategy.Default теперь называется ChangeDetectionStrategy.Eager, что лучше отражает его поведение.

Синтаксис шаблонов Angular стал более выразительным: теперь внутри HTML-элементов поддерживаются стандартные однострочные (//) и многострочные (/* */) комментарии, что расширяет возможности для документирования кода.

<div
 // valid comment
 /* another valid comment */
 attr1="value1"
 /*
    a valid comment
    spanning multiple
    lines
 */
 attr2="value2">
</div>

Компилятор автоматически дедуплицирует хост-директивы на одном элементе, отдавая приоритет шаблону при совпадении. В шаблонах появилась поддержка спред-синтаксиса для объектных и массивных литералов, а также возможность использовать простые стрелочные функции.

Конструкция @switch теперь поддерживает объединение нескольких условий @case для вывода общего результата, а добавление значения never в блок @default включает строгую проверку необработанных значений union-типов на уровне компиляции:

<section>
@switch (orderStatus) {
 @case ('Pending')
 @case ('Processing') {
   <p class="badge-blue">In Progress</p>
 }
 @case ('Shipped') {
   <p class="badge-green">Shipped</p>
 }
 @default never;
}
</section>

Это позволяет разработчикам, использующим union-типы, ловить ошибки, связанные с необработанными значениями.

Для изолированной обработки ошибок разработчики анонсировали экспериментальный API @boundary. Он позволяет локализовать сбой в отдельном компоненте и предотвратить падение всей страницы, что особенно важно для критических пользовательских сценариев вроде оформления заказа.

<section>
 <!-- Errors that bubble up through the promotional widget are caught -->
 @boundary {
   <app-promotional-widget />
 }
 @error (let err){
   <!-- Fallback content -->
   <app-default-promo-widget />
 }
 <app-cart-summary />
 <app-checkout-flow />
</section>

Разработчики планируют представить эту функциональность в режиме предварительного просмотра в третьем квартале 2026 года.

С выходом Angular v22 фреймворк прекратил поддержку среды выполнения Node.js 20 и объявил устаревшей поддержку сборщика Webpack в пользу экспериментального TSGo. Полный переход на встроенный Application Builder требует использования TypeScript 6. Обновить проекты до актуальной версии можно с помощью стандартной CLI-команды ng update.

Итоги

Фреймворк активно продолжает развиваться. Прослеживается тенденция работы сразу по двум направлениям: поддержка уже существующих фич и уверенное движение вперед — к агентной разработке и эре веб-приложений,  которые станут доступны каждому. Возможно, мы становимся свидетелями начала глобального перехода, когда разработка станет не покрытой мраком тайной для избранных, а реальной возможностью воплотить любую идею в реальность.