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

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

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

Вот некоторые из основных моментов:

• Мы запускаем экспериментальные Signal Forms (формы на базе сигналов), обеспечивающие новый масштабируемый, компонуемый и реактивный опыт работы с формами, построенный на Сигналах.

• Angular Aria запускается в режиме Developer Preview, предоставляя headless-компоненты (компоненты без стилей), созданные с приоритетом на доступность, которые вы можете стилизовать по-своему.

• Ваши ИИ-агенты могут использовать Angular MCP Server, теперь с семью стабильными и экспериментальными инструментами, позволяющими LLM использовать новые функции Angular с первого дня.

• Angular CLI интегрирует Vitest как новый стандартный инструмент запуска тестов. Поддержка Vitest теперь стабильна и готова к продакшену.

• Новые приложения Angular больше не включают zone.js по умолчанию!

• И многое другое — давайте углубимся в детали!

Экспериментальные Signal Forms уже здесь

Мы с гордостью сообщаем, что теперь вы можете попробовать Signal Forms — экспериментальную библиотеку, которая позволяет управлять состоянием формы, опираясь на реактивный фундамент Сигналов!

В Signal Forms модель формы определяется сигналом, который автоматически синхронизируется с привязанными к нему полями формы, что обеспечивает эргономичный опыт разработки с полной типобезопасностью при доступе к полям формы. Мощная и централизованная логика валидации на основе схем уже встроена ?.

Чтобы начать, создайте модель формы и передайте её в form():

import { form, Field } from '@angular/forms/signals';

@Component({
  imports: [Field],
  template: `
    Email: <input [field]="loginForm.email">
    Password: <input [field]="loginForm.password">
  `
})
export class LoginForm {
  login = signal({
    email: '',
    password: ''
  });
  
  loginForm = form(this.login);
}

Теперь вы можете привязать поля к шаблону с помощью директивы [field]. Типичные паттерны валидации, такие как проверка email или соответствие регулярным выражениям, уже встроены, а кастомные валидаторы дают возможность создавать еще более мощные механизмы проверки.

Привязка к кастомным компонентам основана на сигналах и проще, чем когда-либо — больше нет необходимости в ControlValueAccessor.

Чтобы начать, ознакомьтесь с руководством по Signal Forms или полной документацией.

Мы с нетерпением ждем, когда вы начнете создавать приложения с Signal Forms. API Signal Forms все еще является экспериментальным, и мы будем итерировать его на основе отзывов. Пожалуйста, попробуйте и расскажите нам, что вы думаете.

Доступные компоненты в вашем стиле с Angular Aria

Мы рады сообщить о запуске (в режиме Developer Preview) нашей новой современной библиотеки для общих UI-паттернов. Мы создали Angular Aria, поставив доступность на первое место. Для начала вам доступен набор из 8 UI-паттернов, включающих 13 компонентов, которые полностью лишены стилей и могут быть настроены с использованием ваших собственных стилей.

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

8 паттернов, с которыми мы запускаемся:

• Accordion (Аккордеон)

• Combobox (Комбобокс)

• Grid (Сетка)

• Listbox (Список)

• Menu (Меню)

• Tabs (Вкладки)

• Toolbar (Панель инструментов)

• Tree (Дерево)

Angular Aria включает сложные компоненты, которые вы можете стилизовать самостоятельно, например, многоуровневые автономные меню.

Установите новую библиотеку, выполнив npm i @angular/aria. Затем перейдите к нашему полному руководству по Angular Aria, которое содержит информацию об использовании и примеры кода для всех компонентов, а также демонстрацию "скинов", которые вы можете скопировать и вставить, чтобы попробовать разные варианты внешнего вида.

Команда Angular теперь предлагает три разных способа помощи в использовании и разработке компонентов:

1. Используйте Angular Aria для доступных headless-компонентов, которые вы можете стилизовать по своему желанию.

2. Используйте CDK для примитивов поведения, таких как Drag and Drop, которые можно включить в ваши собственные компоненты.

3. Используйте Angular Material для полной библиотеки готовых стилизованных компонентов, следующих принципам Material Design. Вы можете настроить компоненты, используя собственную темизацию.

Мы ждем ваших отзывов об Angular Aria и того, что вы с ней создадите.

Больше инструментов для ваших ИИ-агентов — с Angular MCP Server

Чтобы убедиться, что вы готовы к эре ИИ, мы хотим обеспечить разработчиков правильными инструментами. Мы хотим предоставить инструменты для того, как разработчики работают сейчас, и того, как работа будет развиваться.

В v20.2 мы запустили сервер MCP, встроенный в Angular CLI, чтобы гарантировать, что ИИ-агенты имеют весь необходимый контекст для разработки на Angular, и мы рады сообщить, что сервер MCP теперь стабилен!

Angular MCP server предоставляет набор инструментов, дающих ИИ-агентам правильный контекст о современном Angular и вашем приложении, и даже помогает вам стать лучшим разработчиком. Вы можете использовать сервер MCP, чтобы:

• Получить общий контекст: Инструмент get_best_practices предоставляет руководство по лучшим практикам Angular, а инструмент list_projects находит все проекты Angular в вашем рабочем пространстве.

• Найти актуальную информацию: Инструмент search_documentation может отвечать на вопросы по Angular, запрашивая официальную документацию, а find_examples предоставляет доступ к актуальным примерам современных паттернов Angular. Скоро мы добавим больше примеров, таких как формы на сигналах и Angular Aria, чтобы ваши ИИ-агенты могли использовать новые паттерны.

• Обновить приложение: Инструмент onpush_zoneless_migration может проанализировать ваш код и предоставить план миграции приложения на OnPush и zoneless (безонное) обнаружение изменений. Также есть экспериментальный инструмент modernize для выполнения миграции кода с использованием существующих схем.

• Обучение Angular: Инструмент ai_tutor запускает интерактивного ИИ-репетитора по Angular, который поможет изучить концепции и получить обратную связь (рекомендуется использовать с новым приложением Angular).

С сервером MCP вы можете преодолеть проблему "knowledge cutoff" (устаревания знаний) — ваша LLM была обучена знаниям Angular на определенную дату, но используя сервер MCP, она может научиться использовать даже совершенно новые функции, такие как Signal Forms и Angular Aria — вам просто нужно попросить вашего агента найти примеры и использовать их!

Vitest как новый стандартный, стабильный инструмент тестирования

Поскольку Karma была объявлена устаревшей в 2023 году, команда Angular исследовала Jest, Web Test Runner и Vitest как новые решения для тестирования.

Получив положительные отзывы от сообщества, мы остановились на Vitest как на нашем новом стандартном раннере тестов и переводим его в статус стабильного в Angular v21 ?.

Чтобы использовать Vitest в новом приложении Angular, просто запустите команду ng test.

Чтобы узнать больше о тестировании с Vitest, ознакомьтесь с документацией на angular.dev.

Хотя Vitest является новым стандартом для новых проектов, Karma и Jasmine по-прежнему полностью поддерживаются командой Angular, поэтому вам пока не нужно мигрировать.

Если вы готовы перевести существующее приложение на использование Vitest, вы можете запустить экспериментальную миграцию. После выполнения некоторых подготовительных шагов, описанных в руководстве, запустите:

ng g @schematics/angular:refactor-jasmine-vitest

Ваши тесты будут автоматически переработаны для использования Vitest.

Поскольку поддержка Vitest стала стабильной, мы решили прекратить экспериментальную поддержку Web Test Runner и Jest и планируем удалить их в v22. Командам, которые хотят продолжать использовать Jest, стоит рассмотреть альтернативы сообщества, такие как jest-preset-angular и плагин Nx Jest.

Zoneless готов к широкому использованию

Традиционно Angular использовал zone.js — библиотеку, которая патчит API браузера для отслеживания изменений в приложениях. Это обеспечивало "магический" опыт, когда шаблоны автоматически обновлялись по мере действий пользователя, однако zone.js имеет недостатки производительности, особенно для сложных приложений.

С сигналами, управляющими состоянием современного Angular, zone.js больше не нужен для обнаружения изменений. Обнаружение изменений без зон (Zoneless), представленное экспериментально в v18, прошло через Developer Preview в v20 и достигло стабильности в v20.2.

Благодаря нашему опыту работы с приложениями в Google, мы стали все более уверенными в том, что новые приложения Angular лучше всего работают без zone.js.

В 2024 году более половины совершенно новых приложений Angular внутри Google были созданы со стратегией Zoneless, и мы сделали её стандартом в середине 2024 года. Сейчас внутри Google в продакшене работают сотни zoneless-приложений.

Учитывая эти сильную интеграцию сигналов, zone.js и его функции больше не будут включаться по умолчанию в приложениях Angular, начиная с v21.

Включение Zoneless обнаружения изменений дает такие преимущества, как лучшие показатели Core Web Vitals, нативный async-await, совместимость с экосистемой, уменьшенный размер бандла, упрощенная отладка и лучший контроль.

Новые приложения будут автоматически использовать Zoneless. Для существующих приложений следуйте нашим инструкциям по миграции на angular.dev. Вы также можете попробовать новый инструмент onpush_zoneless_migration в Angular MCP server, который создает пошаговый план перевода вашего приложения на стратегию обнаружения изменений OnPush.

Хотя Zoneless — это новый опыт по умолчанию, мы хотим признать, что zone.js сыграл важную роль в формировании Angular и позволял разработчикам создавать магические вещи в течение многих лет. Мы выражаем огромную БЛАГОДАРНОСТЬ команде zone.js, особенно Jia Li за вклад в развитие библиотеки.

Новый опыт работы с документацией

Если вы заходили на angular.dev в последние несколько недель, вы могли заметить новую целевую страницу. Но это не всё, что изменилось — мы внесли значительные изменения, чтобы документация была современной и обучала новейшим концепциям, чтобы вы всегда получали свежую информацию.

На Google I/O 2025 мы запустили angular.dev/ai — ресурс для всего необходимого для создания приложений на базе ИИ с Angular. Мы включили лучшие практики, примеры кода, паттерны проектирования и многое другое.

Если вы в начале своего пути в создании реактивных приложений, ознакомьтесь с новым учебником по Сигналам, который предоставляет полный обзор всех стабильных API сигналов, включая model(), linkedSignal() и другие.

Мы вложили значительные усилия в обновление руководств для разработчиков:

• Документация по маршрутизации была полностью переработана и теперь предоставляет подробную информацию обо всех аспектах.

• Руководства по внедрению зависимостей (DI) были значительно улучшены и стали более доступными.

• Мы добавили подробное руководство по подходам к темизации компонентов Material.

• И наконец, появилось полное руководство по использованию Angular с Tailwind CSS!

И многое другое…

Мы были заняты! Помимо отличных функций, о которых мы уже рассказали, есть еще несколько вещей, заслуживающих особого упоминания:

• Поддержка библиотеки CLDR обновлена с v41 до v47 (улучшено форматирование валют, дат и т.д.).

• Теперь мы поддерживаем регулярные выражения в шаблонах:

  @let isValidNumber = /\d+/.test(someValue);
  
  @if (!isValidNumber) {
    <p>{{someValue}} is not a valid number!</p>
  }
  

• Angular теперь имеет встроенный форматтер Сигналов. Включите "Custom formatters" в Chrome/Firefox, чтобы использовать эту функцию при отладке.

• Теперь вы можете настроить параметры IntersectionObserver для триггеров @defer, связанных с viewport, например:

  @defer (on viewport({trigger, rootMargin: '100px'}) {
    <section>Content</section>
  }
  

• SimpleChanges теперь являются дженериком, что позволяет лучше типизировать значения внутри SimpleChanges.

• Пайп KeyValue теперь поддерживает объекты с опциональными ключами.

• В качестве альтернативы CSS-переменным теперь можно использовать новый набор утилитных классов для применения системных токенов Material Design прямо в шаблонах.

• Оверлеи CDK теперь используют встроенные в браузер popover, что помогает решить некоторые проблемы доступности.

И на случай, если вы пропустили — это только обновления с момента выхода Angular v20.2. Если вы следите только за мажорными релизами, вы могли пропустить:

• Новые API для анимации элементов при их добавлении и удалении из DOM.

• Улучшения CDK Drag&Drop (копирование элементов между списками).

• Визуализация маршрутов и граф сигналов в Angular DevTools.

Полный список изменений, как всегда, в нашем Changelog.

Angular ♥️ наше потрясающее сообщество

Этот релиз был бы невозможен без нашего open-source сообщества. Огромное спасибо всем контрибьюторам!

С момента выхода v20, 215 человек внесли свой вклад в кодовую базу Angular.

Обновление маскота!

Возможно, вы помните, что мы просили вас высказать свое мнение о маскоте Angular в v20! Наш RFC по маскоту получил рекордное количество заявок. Мы знаем, что вы хотите познакомиться с нашим новым маскотом, поэтому обязательно посмотрите наше релизное событие на YouTube 20 ноября 2025 года для официального анонса ⭐.

Время создавать следующую волну приложений

Мы невероятно гордимся этим релизом, но это лишь один шаг в путешествии Angular. Мы внимательно следим за новыми паттернами будущего веб-разработки.

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

Обязательно запустите ng update и создавайте приложения, которые полюбят ваши пользователи.