Выпуск Angular v22: от повышения стабильности до ИИ-песочницы

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

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

Стабильные 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 в панели конфигурации, чтобы быстро генерировать и редактировать прототипы приложений с помощью простых промптов.

Создайте веб‑приложение и получите бонусы на его деплой в облако

В новом бесплатном курсе по JavaScript.

Подробнее →

Быстрее, выше, сильнее. Улучшения 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-типы, ловить ошибки, связанные с необработанными значениями.

Для изолированной обработки ошибок разработчики анонсировали экспериментальный программный интерфейс @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.

Итоги

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