Дорожная карта Angular

Signal Forms

Signal Forms теперь стабильны. Этот новый подход позволяет разработчикам управлять состоянием форм с помощью signals, обеспечивая эргономичный опыт создания форм. Мы продвинули Signal Forms до stable и улучшили interop с reactive forms — позволяя командам постепенно мигрировать крупные формы в своём темпе.

Reactivity

Мы представили новые signal API, resource() и httpResource(), для гибкой асинхронной обработки данных. Мы продвинули эти API до developer stable.

Change Detection

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

См. обсуждение RFC для подробностей.

Improve HMR (Hot Module Reload)

Мы работаем над более быстрым циклом edit/refresh, включая hot module replacement. В Angular v19 мы поставили начальную поддержку CSS и template HMR, а в v20 продвинули template HMR до stable. Мы продолжим собирать отзывы, чтобы убедиться, что закрываем потребности разработчиков, прежде чем отметить этот проект как завершённый.

Deliver Angular Signals

Этот проект переосмысливает модель реактивности Angular, вводя Signals как примитив реактивности. Начальное планирование привело к сотням обсуждений, разговоров с разработчиками, сессий обратной связи, UX-исследований и серии RFC, получивших более 1000 комментариев.

В Angular v20 мы продвинули все фундаментальные примитивы реактивности до stable, включая signal, effect, linkedSignal, signal-based queries и inputs.

Support two-dimensional drag-and-drop

В рамках этого проекта мы реализовали поддержку смешанной ориентации для drag and drop Angular CDK. Это одна из самых запрашиваемых возможностей репозитория.

Event replay with SSR and prerendering

В v18 мы ввели функциональность event replay при использовании SSR или prerendering. Для этой возможности мы опираемся на примитив event dispatch (ранее известный как jsaction), работающий на Google.com.

В Angular v19 мы продвинули event replay до stable и включили его по умолчанию для всех новых проектов.

Expand the customizability of Angular Material

Чтобы обеспечить лучшую кастомизацию компонентов Angular Material и возможности Material 3, мы сотрудничаем с командой Material Design Google по определению token-based theming API.

В v17.2 мы поделились экспериментальной поддержкой Angular Material 3, а в v18 продвинули её до stable.

Introduce deferred loading

В v17 мы поставили deferrable views в developer preview, предоставляющие эргономичный API для отложенной загрузки кода. В v18 мы включили deferrable views для разработчиков библиотек и продвинули API до stable.

Automation for transition of existing hybrid rendering projects to esbuild and vite

В v17 мы поставили application builder на базе vite и esbuild и включили его для новых проектов по умолчанию. Он улучшает время сборки для проектов с hybrid rendering до 87%. В рамках v18 мы поставили schematics и руководство, мигрирующие существующие проекты с hybrid rendering на новый pipeline сборки.

Make Angular.dev the official home for Angular developers

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

Introduce built-in control flow

В v17 мы поставили developer preview версию нового control flow. Он приносит значительные улучшения производительности и лучшую эргономику для написания шаблонов. Мы также предоставили миграцию существующих *ngIf, *ngFor и *ngSwitch, которую можно запустить для перевода проекта на новую реализацию. Начиная с v18 встроенный control flow стабилен.

Investigate modern bundlers

В Angular v16 мы выпустили developer preview esbuild-based builder с поддержкой ng build и ng serve. Development-сервер ng serve использует Vite и multi-file компиляцию esbuild и компилятора Angular. В v17 мы продвинули инструменты сборки из developer preview и включили их по умолчанию для новых проектов.

Introduce dependency injection debugging APIs

Чтобы улучшить утилиты отладки Angular и Angular DevTools, мы работаем над API, предоставляющими доступ к runtime внедрения зависимостей. В рамках проекта мы экспонируем методы отладки, позволяющие исследовать иерархию injector и зависимости по связанным providers. Начиная с v17 мы поставили возможность подключения к жизненному циклу внедрения зависимостей. Мы также запустили визуализацию дерева injector и инспекцию providers, объявленных внутри каждого отдельного узла.

Improve documentation and schematics for standalone components

Мы выпустили developer preview коллекции schematics ng new --standalone, позволяющей создавать приложения без NgModules. В v17 мы переключили формат создания новых приложений на standalone API и изменили документацию, чтобы отразить рекомендацию. Кроме того, мы поставили schematics, поддерживающие обновление существующих приложений до standalone-компонентов, директив и pipes. Хотя NgModules останутся в обозримом будущем, мы рекомендуем изучить преимущества новых API для улучшения опыта разработчика и получения выгоды от новых возможностей, которые мы для них строим.

Non-destructive full app hydration

В v16 мы выпустили developer preview non-destructive full hydration, позволяющей Angular переиспользовать существующие DOM-узлы на SSR-странице вместо пересоздания приложения с нуля. Дополнительную информацию см. в руководстве по гидратации.

Improvements in the image directive

Мы выпустили Angular image directive как stable в v15. Мы ввели новую возможность fill mode, позволяющую изображениям вписываться в родительский контейнер вместо явных размеров. За последние два месяца команда Chrome Aurora сделала backport директивы до v12 и новее.

Documentation refactoring

Обеспечить, чтобы вся существующая документация соответствовала согласованному набору типов контента. Обновить чрезмерное использование tutorial-style документации в независимые темы. Мы хотим гарантировать, что контент вне основных туториалов самодостаточен без жёсткой привязки к серии руководств. Во Q2 2022 мы отрефакторили контент шаблонов и внедрения зависимостей. Во Q1 2023 мы улучшили руководства HTTP и на этом приостанавливаем проект рефакторинга документации.

Improve image performance

Команды Aurora и Angular работают над реализацией image directive, нацеленной на улучшение Core Web Vitals. Мы поставили стабильную версию image directive в v15.

Modern CSS

Веб-экосистема постоянно развивается, и мы хотим отражать последние современные стандарты в Angular. В этом проекте мы стремимся предоставить руководства по использованию современных возможностей CSS в Angular, чтобы разработчики следовали лучшим практикам для layout, стилизации и т.д. Мы поделились официальными руководствами по layout и в рамках инициативы прекратили публикацию flex layout.

Support adding directives to host elements

Давно запрашиваемая возможность — добавлять директивы к host-элементам. Возможность позволяет разработчикам дополнять собственные компоненты дополнительным поведением без использования наследования. В v15 мы поставили наш directive composition API, позволяющий усиливать host-элементы директивами.

Better stack traces

Angular и Chrome DevTools работают вместе, чтобы обеспечить более читаемые stack traces для сообщений об ошибках. В v15 мы выпустили улучшенные релевантные и связанные stack traces. Как инициативу более низкого приоритета мы исследуем, как сделать stack traces дружелюбнее, предоставляя более точные имена call frame для шаблонов.

Enhanced Angular Material components by integrating MDC Web

MDC Web — библиотека, созданная командой Google Material Design, предоставляющая переиспользуемые примитивы для построения компонентов Material Design. Команда Angular включает эти примитивы в Angular Material. Использование MDC Web лучше выравнивает Angular Material со спецификацией Material Design, расширяет accessibility, улучшает качество компонентов и повышает скорость нашей команды.

Implement APIs for optional NgModules

В процессе упрощения Angular мы работаем над введением API, позволяющих разработчикам инициализировать приложения, создавать экземпляры компонентов и использовать роутер без NgModules. Angular v14 вводит developer preview API для standalone-компонентов, директив и pipes. В следующие несколько кварталов мы соберём отзывы разработчиков и финализируем проект, сделав API стабильными. Следующим шагом мы поработаем над улучшением use cases вроде TestBed, Angular elements и т.д.

Allow binding to protected fields in templates

Чтобы улучшить инкапсуляцию компонентов Angular, мы включили привязку к protected членам экземпляра компонента. Таким образом, больше не нужно экспонировать поле или метод как public, чтобы использовать его внутри шаблонов.

Publish guides on advanced concepts

Разработать и опубликовать подробное руководство по обнаружению изменений. Разработать контент для профилирования производительности Angular-приложений. Охватить, как обнаружение изменений взаимодействует с Zone.js, и объяснить, когда оно запускается, как профилировать его длительность, а также распространённые практики оптимизации производительности.

Rollout strict typings for @angular/forms

Во Q4 2021 мы спроектировали решение для введения строгой типизации форм, а во Q1 2022 завершили соответствующий request for comments. Сейчас мы реализуем стратегию rollout с автоматизированным шагом миграции, который включит улучшения для существующих проектов. Сначала мы тестируем решение на более чем 2500 проектах в Google, чтобы обеспечить гладкий путь миграции для внешнего сообщества.

Remove legacy View Engine

После завершения перехода всех наших внутренних инструментов на Ivy мы удалим legacy View Engine для снижения концептуальной нагрузки Angular, меньшего размера пакета, меньшей стоимости поддержки и меньшей сложности кодовой базы.

Simplified Angular mental model with optional NgModules

Чтобы упростить ментальную модель Angular и путь обучения, мы работаем над тем, чтобы сделать NgModules необязательными. Эта работа позволяет разработчикам разрабатывать standalone-компоненты и реализовать альтернативный API для объявления области компиляции компонента. Мы запустили этот проект высокоуровневыми обсуждениями дизайна, которые зафиксировали в RFC.

Design strict typing for @angular/forms

Мы будем работать над поиском способа реализовать более строгую проверку типов для reactive forms с минимальными обратно несовместимыми последствиями. Таким образом, мы позволяем разработчикам ловить больше проблем во время разработки, обеспечиваем лучшую поддержку текстовых редакторов и IDE и улучшаем проверку типов для reactive forms.

Improve integration of Angular DevTools with framework

Чтобы улучшить интеграцию Angular DevTools с фреймворком, мы работаем над переносом кодовой базы в monorepository angular/angular. Это включает переход Angular DevTools на Bazel и интеграцию в существующие процессы и CI pipeline.

Launch advanced compiler diagnostics

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

Update our e2e testing strategy

Чтобы обеспечить future-proof стратегию e2e-тестирования, мы хотим оценить состояние Protractor, инновации сообщества, лучшие практики e2e и исследовать новые возможности. Как первые шаги усилия мы поделились RFC и работали с партнёрами, чтобы обеспечить гладкую интеграцию между Angular CLI и современными инструментами e2e-тестирования. Следующим шагом нужно финализировать рекомендации и составить список ресурсов для перехода.

Angular libraries use Ivy

Ранее в 2020 мы поделились RFC по дистрибуции Ivy-библиотек. После бесценной обратной связи сообщества мы разработали дизайн проекта. Сейчас мы инвестируем в разработку дистрибуции Ivy-библиотек, включая обновление формата пакета библиотеки для использования Ivy-компиляции, разблокировку deprecation формата библиотек View Engine и ngcc.

Improve test times and debugging with automatic test environment tear down

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

Deprecate and remove IE11 support

Internet Explorer 11 (IE11) мешал Angular пользоваться некоторыми современными возможностями веб-платформы. В рамках этого проекта мы пометим как deprecated и удалим поддержку IE11, чтобы открыть путь современным возможностям evergreen-браузеров. Мы провели RFC для сбора отзывов сообщества и решения о следующих шагах.

Leverage ES2017+ as the default output language

Поддержка современных браузеров позволяет пользоваться более компактным, выразительным и производительным новым синтаксисом JavaScript. В рамках этого проекта мы исследуем, что блокирует продвижение этой инициативы, и предпримем шаги для её включения.

Accelerated debugging and performance profiling with Angular DevTools

Мы работаем над инструментами разработки для Angular, предоставляющими утилиты для отладки и профилирования производительности. Этот проект призван помочь разработчикам понять структуру компонентов и обнаружение изменений в Angular-приложении.

Streamline releases with consolidated Angular versioning & branching

Мы хотим консолидировать инструменты управления релизами между несколькими GitHub-репозиториями Angular (angular/angular, angular/angular-cli и angular/components). Это усилие позволяет переиспользовать инфраструктуру, унифицировать и упростить процессы и улучшить надёжность нашего процесса релизов.

Higher developer consistency with commit message standardization

Мы хотим унифицировать требования к сообщениям коммитов и соответствие между репозиториями Angular (angular/angular, angular/components и angular/angular-cli), чтобы обеспечить согласованность процесса разработки и переиспользовать инфраструктурные инструменты.

Transition the Angular language service to Ivy

Цель этого проекта — улучшить опыт и убрать legacy-зависимость, переведя language service на Ivy. Сегодня language service всё ещё использует компилятор и проверку типов View Engine даже для Ivy-приложений. Мы хотим использовать Ivy template parser и улучшенную проверку типов для Angular Language service, чтобы соответствовать поведению приложения. Эта миграция также шаг к разблокировке удаления View Engine, что упростят Angular, уменьшит размер npm-пакета и улучшит поддерживаемость фреймворка.

Increased security with native Trusted Types in Angular

В сотрудничестве с командой безопасности Google мы добавляем поддержку нового API Trusted Types. Этот API веб-платформы помогает разработчикам строить более безопасные веб-приложения.

Optimized build speed and bundle sizes with Angular CLI webpack 5

В рамках релиза v11 мы ввели opt-in preview webpack 5 в Angular CLI. Чтобы обеспечить стабильность, мы продолжим итерации над реализацией для включения улучшений скорости сборки и размера бандла.

Faster apps by inlining critical styles in Universal apps

Загрузка внешних таблиц стилей — блокирующая операция, то есть браузер не может начать отрисовку приложения, пока не загрузит весь ссылаемый CSS. Наличие render-blocking ресурсов в header страницы может значительно влиять на производительность загрузки, например first contentful paint. Чтобы сделать приложения быстрее, мы сотрудничали с командой Google Chrome по встраиванию critical CSS и асинхронной загрузке остальных стилей.

Improve debugging with better Angular error messages

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

Improved developer onboarding with refreshed introductory documentation

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

Expand component harnesses best practices

Angular CDK ввёл концепцию component test harnesses в Angular в версии 9. Test harnesses позволяют авторам компонентов создавать поддерживаемые API для тестирования взаимодействий с компонентами. Мы продолжаем улучшать эту инфраструктуру harnesses и прояснять лучшие практики вокруг их использования. Мы также работаем над увеличением adoption harnesses внутри Google.

Author a guide for content projection

Проекция контента — ключевая концепция Angular, которая не имеет того присутствия в документации, которого заслуживает. В рамках этого проекта мы хотим определить основные use cases и концепции проекции контента и задокументировать их.

Migrate to ESLint

С deprecation TSLint мы переходим на ESLint. В рамках процесса мы поработаем над обеспечением обратной совместимости с нашей текущей рекомендуемой конфигурацией TSLint, реализуем стратегию миграции для существующих Angular-приложений и введём новые инструменты в toolchain Angular CLI.

Operation Bye Bye Backlog (also known as Operation Byelog)

Мы активно инвестируем до 50% инженерной ёмкости в triage issues и PR, пока не получим ясное понимание более широких потребностей сообщества. После этого мы обязуемся выделять до 20% инженерной ёмкости, чтобы оперативно успевать за новыми submissions.