Сейчас середина 2026 года, что побуждает к пересмотру прогнозов на год. Эксперты пересматривают свои прогнозы по Angular на 2026 год, чтобы увидеть, какие из них сбылись. Инструменты с поддержкой ИИ трансформируют разработку Angular через протокол контекста модели. Это достижение позволяет инструментам понимать рабочие пространства за пределами базовой структуры. Доступен краткий обзор Angular v21, а также видео, посвященное тенденции ИИ писать устаревший код Angular. Выпущен бесплатный комплексный курс по современным функциям и лучшим практикам Angular. Разработчики теперь могут проверить, готовы ли их приложения Angular к архитектуре без зон. Этот переход к архитектуре без зон является значительным шагом для высокопроизводительных приложений Angular. Внедрение Signals подчеркивается как главное архитектурное изменение в разработке Angular. В эпизоде подкаста обсуждается, как эффективно использовать Signals для реактивного программирования.

Angular выпустил версию 22, сосредоточившись на стабильности и удобстве для разработчиков. Это обновление выводит три значительные функции на уровень готовности к производству: Signal Forms, Angular Aria и Asynchronous Reactivity APIs. Signal Forms предлагает компонуемое и реактивное решение для создания форм, теперь с полной документацией и учтенными отзывами сообщества. Angular Aria предоставляет доступные примитивы для создания инклюзивных веб-приложений со стабилизированными API и тестовыми средствами. Asynchronous Reactivity APIs, включая новые resource и httpResource, позволяют разработчикам использовать асинхронное программирование в сигналах для улучшения получения данных. Релиз также подчеркивает роль Angular в разработке ИИ, представляя инструментарий для создания кода и платформы для разработки ИИ. Это включает обновленные инструменты Model Context Protocol (MCP) для лучшего взаимодействия агентов с сервером разработки и Angular Agent Skills, чтобы предоставить ИИ-агентам контекст по современной разработке Angular. Также включена экспериментальная поддержка WebMCP, позволяющая структурированно выставлять инструменты для взаимодействия агентов в браузере. Кроме того, Angular улучшает платформы разработки ИИ, такие как Google AI Studio и Gemini Canvas, чтобы предоставить разработчикам сильные стороны фреймворка. Разработчики могут прототипировать непосредственно в браузере и использовать упрощенные подсказки для генерации приложений Angular. Эти достижения направлены на то, чтобы сделать Angular надежной основой для создания следующего поколения веб-приложений.

Этот текст освещает несколько репозиториев Angular, предлагающих практический опыт обучения. Антонио Карденас демонстрирует продвинутое создание динамических компонентов с использованием ViewContainerRef, предоставляя репозиторий кода и демо StackBlitz. Он также предлагает шаблон "Vibe Coding" для быстрого старта CRUD-проектов. Дебора Курата представляет httpResource на основе Signals с примером "Пираты". Анкит Шарма демонстрирует приложение Angular, интегрирующее Google Gemini для коррекции грамматики в реальном времени. Эти примеры идеально подходят для изучения новейших шаблонов Angular и интеграции помощи ИИ. Репозитории охватывают такие темы, как динамические компоненты, CRUD и получение данных с помощью реактивных примитивов. Эти ресурсы предназначены как для начинающих, так и для опытных разработчиков Angular. Текст призывает сообщество Angular делиться своими собственными проектами. Разработчикам предлагается делиться своими репозиториями и демо StackBlitz, используя соответствующие хэштеги. Подчеркивается сотрудничество и обмен опытом для содействия росту сообщества. Текст продвигает практическое обучение посредством изучения кода и практических проектов.

Автор, разработчик, вернулся из отпуска по уходу за ребенком в быстро меняющийся мир искусственного интеллекта, особенно в область навыков агентов. Навыки агентов, наборы инструкций для агентов ИИ, вызвали переосмысление предыдущего проекта, Angular AI Tutor. Тьютор интерактивно обучает Angular, изначально построенный с использованием простого файла правил и Gemini. Однако проект столкнулся с проблемами в непрерывности уроков и актуальности синтаксиса по мере превращения в интерактивный продукт. Логика тьютора была тесно связана, что затрудняло повторное использование и усложняло обновления. Предложенное решение, архитектура Router + Building Blocks, было направлено на создание модульных, многоразовых компонентов для тьютора. Сейчас автор видит в навыках агентов потенциальный инструмент для реализации этого видения Context Pipeline Engineering. Автор задается вопросами о расширяемости, надежности, оптимизации токенов и стабильности этих систем. В конечном итоге, автор рассматривает более глубокие, структурные вопросы об инженерии ИИ. Автор называет эту дисциплину Context Pipeline Engineering и приглашает других присоединиться к исследованию. Статья завершается восторгом автора по поводу возвращения к работе и создания новых вещей.

Angular-сообщество внедряет инновации в области искусственного интеллекта и доступности. Разработчики изучают способы создания более умных и красивых приложений. Фанис Продрому продемонстрировал автоматическую стилизацию состояний форм с помощью Angular Signal Forms и пользовательского CSS. Даниэль Эррера Санчес представил приложение для когнитивных тренировок под названием "Mind Palace AI", созданное с использованием Angular и Gemini 3.0. Мариано Альварес дал рекомендации по уменьшению галлюцинаций ИИ при использовании Gemini CLI в Angular-проектах. Он также объяснил, как запускать Gemini локально и бесплатно в Angular-приложениях, используя возможности ИИ Chrome. Конни Лёнг поделилась примером кода приложения для редактирования фотографий, использующего Google Nano Banana и Firebase AI. Она также представила генератор AI Alt Text и Text-to-Speech, использующий Gemini 2.5 Flash TTS для обеспечения доступности. Эти примеры подчеркивают достижения в области обработки изображений и функциональности преобразования текста в речь. Разработчикам рекомендуется делиться своими проектами в области ИИ и доступности, используя хэштеги #AngularSparkles и #AngularAI.

На этой неделе мы сосредоточимся на практическом изучении Angular на примерах кода. Несколько репозиториев демонстрируют современные шаблоны Angular и интеграцию с Google Gemini. Один репозиторий показывает продвинутое создание динамических компонентов с использованием ViewContainerRef для масштабируемости. Другой предлагает готовый шаблон CRUD для ускорения разработки проектов. httpResource на основе сигналов демонстрируется на примере "Пиратов" для управления данными. Приложение с ИИ-помощником по грамматике интегрирует Google Gemini для исправлений в реальном времени. Эти практические примеры служат образцами для интеграции ИИ в приложения Angular. Разработчикам предлагается делиться собственными проектами Gemini и httpResource. Автор призывает других использовать указанные хэштеги для демонстрации личных проектов. Такой совместный подход способствует обучению сообщества Angular. Эти примеры идеально подходят для изучения и создания. Предоставленные ссылки на GitHub позволяют напрямую изучить реализации кода.

Сообщество Angular активно изучает достижения за пределами типичной среды браузера. Сону Капур подчеркивает запуск моделей ИИ локально во фронтенде, используя ONNX для повышения конфиденциальности и снижения задержек. Этот подход предполагает значительный архитектурный сдвиг в сторону обработки на стороне клиента. Капур также предоставляет руководство по использованию Angular Signals для создания отзывчивых вводов и управления сложной маршрутизацией. Фанис Продрому предлагает ретроспективу Signals, изучая его эволюцию и влияние на разработку Angular. Серия Кевина Давилы посвящена созданию пользовательских элементов управления формами с использованием Signal Forms API. Йоханнес Хоппе предоставляет подробное руководство по миграции наборов тестов Angular в Vitest. Эта миграция в Vitest рекомендуется из-за ее преимуществ в производительности. Предоставленные ресурсы предлагают руководство для говорящих как на немецком, так и на английском языках. Сообществу предлагается делиться своим опытом и идеями. Использование #AngularSparkles и #Vitest поощряется для содействия сотрудничеству.

Разработка Angular быстро развивается с появлением новых инструментов и методов. Эксперты делятся ресурсами, чтобы помочь разработчикам оставаться в курсе этих изменений. Даниэль Эррера Санчес исследует использование инструментов ИИ, таких как Cursor и Claude, с протоколом Model Context Protocol (MCP) для автоматизации кода. Он также предоставляет руководство по использованию синтаксиса `@defer` для оптимизации производительности приложений. Алиса Дункан подробно описывает основные инструменты в наборе инструментов MCP для Angular 21, включая как стабильные, так и экспериментальные опции. Дэмиан Сир экспериментирует с MCP Server Angular, используя ИИ для "Vibe Coding" для генерации сложных шаблонов. Модест АССИОНГБОН освещает улучшения в логике форм, демонстрируя переход к валидаторам простых объектов для лучшей читаемости кода. Затем он предоставляет руководство по Signal Forms, реактивному подходу к современному управлению состоянием форм в Angular. Эти ресурсы охватывают широкий спектр современных тем Angular. Сообщество призывается делиться своим опытом работы с ИИ и MCP в Angular для дальнейших инноваций. Этот прогресс представляет собой продолжающуюся модернизацию рабочего процесса разработки Angular.

Выпущены обновления безопасности для устранения двух уязвимостей рендеринга на стороне сервера (SSR) в Angular. Эти уязвимости включают подделку запросов на стороне сервера (SSRF) и внедрение заголовков, а также ошибку открытого перенаправления. Уязвимость SSRF позволяла злоумышленникам потенциально манипулировать HTTP-заголовками для доступа к несанкционированным доменам. Уязвимость внедрения заголовков возникла из-за доверия Angular к управляемым пользователем заголовкам для перестройки URL-адресов. Ошибка открытого перенаправления была обнаружена в том, как Angular обрабатывает заголовок `X-Forwarded-Prefix`. Это могло привести к перенаправлению на вредоносные веб-сайты, если заголовок `X-Forwarded-Prefix` не был должным образом очищен. Разработчикам настоятельно рекомендуется как можно скорее обновить свои SSR-приложения до последней версии исправления, чтобы снизить эти риски. Если SSR не используется, обновление менее срочно, но все же рекомендуется. Обходные пути включают использование абсолютных URL-адресов и реализацию строгой проверки заголовков в конфигурациях сервера. Очистка заголовка `X-Forwarded-Prefix` служит дополнительным обходным путем для проблемы открытого перенаправления. В отчете поощряется ответственное раскрытие информации и подчеркивается программа Google VRP. Поддержание инфраструктуры в актуальном состоянии имеет решающее значение для развертывания исправлений безопасности.

Импульс Angular продолжается с выпуском Angular 21, вызывая восторг в сообществе. Эксперты делятся ресурсами, чтобы помочь разработчикам понять и использовать новые функции. Алехандро Куба Руис и Хорхе Кано демонстрируют быструю сборку страниц с использованием Gemini CLI и протокола Model Context Protocol (MCP) Angular. Фердинанд Мальхер, Йоханнес Хоппе и Дэнни Коппенхаген предлагают углубленное изучение внутренней работы Angular Signals. Дебора Курата предоставляет всесторонний обзор Angular 21 на английском и немецком языках. Карлос Кабальеро предлагает специализированные серии по Angular ARIA для обеспечения доступности и полный курс по Signals, оба на испанском языке. Аркадио Кинтеро направляет разработчиков по модернизации их рабочего процесса Angular с использованием MCP и инструментов искусственного интеллекта. Сообществу предлагается делиться своими достижениями и реализациями, используя хэштег #AngularSparkles. Эти ресурсы направлены на то, чтобы помочь разработчикам создавать более доступные и современные приложения. Эта информация призвана побудить разработчиков Angular оставаться в авангарде."

Обзор Angular этой недели освещает достижения мирового сообщества. В нем представлены интеграции с ИИ и углубленный анализ новых функций Angular v20. Дэмиан Сир представляет каркас GenAI, проект, использующий Angular, Node.js и Google Gemini API. Уэйн Гакуо демонстрирует систему рекомендаций фильмов на основе ИИ, используя Angular, Genkit и Firebase. Алехандро Куба Руис берет интервью у Марка Техсона об Angular и ИИ на испанском языке. Йоханнес Хоппе анализирует API ресурсов Angular, предлагая улучшения. Фаннис Продрому предоставляет руководство для начинающих по Angular Signal Forms. Модест Ассионгбон предлагает трехсерийный французский цикл об обновлениях Angular v20. Темы охватывают такие вопросы, как асинхронные перенаправления, изменения API ресурсов и новое руководство по стилю. Сообществу предлагается делиться своими работами, используя #AngularSparkles. Эти ресурсы предназначены для того, чтобы помочь разработчикам во всем мире улучшить свои навыки.

Основные моменты этой недели демонстрируют приверженность сообщества Angular обмену знаниями и практическим примерам кодирования. Сону Капур делится вдохновляющей историей, подробно рассказывающей об их переходе с ASP.NET к званию Angular MVP, предлагая ценные сведения для тех, кто меняет карьеру. Фердинанд Мальхер и Дэнни Коппенхаген представляют всеобъемлющую серию из трех частей о освоении нового API Signal Forms в Angular. Бабатунде Ламиди предоставляет полный пример кода, демонстрирующий, как создать генератор контента на основе искусственного интеллекта с использованием Angular и API Gemini. Антонио Карденас предлагает практические рекомендации и примеры кода для модернизации приложений Angular с использованием нового синтаксиса Control Flow. Эти ресурсы охватывают широкий спектр тем, от личных историй до практического кодирования. Представленный контент подчеркивает практическое применение и предоставляет готовые примеры кода для использования разработчиками. Блог поощряет участие сообщества, спрашивая об опыте работы с Signal Forms и Control Flow. Он призывает делиться любимыми ресурсами Angular с использованием хэштега #AngularSparkles. Сообщество работает вместе, чтобы расти и улучшать ландшафт разработки Angular.

Имитационные часы полезны при тестировании программного обеспечения для подделки дат, ускорения длительных операций и предотвращения утечек таймеров между тестами. Они также помогают выполнить все ожидающие таймеры для стабилизации тестовых сред. Однако традиционные имитационные часы могут создавать сложность и антипаттерны, особенно с современными асинхронными возможностями JavaScript. Принудительное синхронное тестирование асинхронной логики может привести к нереалистичным порядкам выполнения и скрыть ошибки, связанные со временем. Тесты часто загромождаются произвольными жестко закодированными продвижениями таймера, что делает их хрупкими. Некоторые тестовые утилиты также могут мешать предполагаемому времени имитационных часов. Для решения этих проблем исследуется концепция "автоматически продвигающихся" имитационных часов. Цель состоит в том, чтобы имитационные часы реалистично продвигали время, упрощая тесты и делая их более предсказуемыми. Эта функция призвана позволить тестам работать с имитационными часами без необходимости значительных изменений в существующем коде. Примеры демонстрируют, как автоматически продвигающиеся имитационные часы беспрепятственно обрабатывают асинхронные функции и ожидание условий. Авторы тестовых фреймворков привлекаются для поддержки этой функциональности. Такие библиотеки, как Jasmine и @sinonjs/fake-timers, уже включают возможности автоматического продвижения. Это усовершенствование обещает более быстрые и предсказуемые асинхронные тесты в различных веб-фреймворках.

Google AI Studio теперь поддерживает генерацию приложений Angular. Это сотрудничество призвано привнести мощь искусственного интеллекта Gemini в сообщество разработчиков Angular. Разработчики могут получить доступ к этой функции через вкладку "Build" в AI Studio, начиная бесплатно. Чтобы сгенерировать код Angular, пользователи должны сначала выбрать шаблон фреймворка "Angular (TypeScript)" в расширенных настройках. После выбора шаблона пользователи могут вводить запросы для желаемого приложения. Затем Gemini сгенерирует приложение Angular на основе предоставленного запроса. Эта интеграция значительно ускоряет прототипирование и разработку приложений, сокращая первоначальные сроки с недель до дней. Помимо генерации кода, AI Studio позволяет создавать приложения с использованием искусственного интеллекта, используя Gemini API. Сгенерированные приложения можно легко развернуть в Cloud Run для бессерверной среды. Код также можно экспортировать в GitHub для контроля версий и совместной работы. Обмен сгенерированными приложениями для получения отзывов и демонстрации концепции также упрощен. Разработчикам предлагается попробовать эту новую функцию по адресу goo.gle/angular-ai-studio и поделиться своими творениями, используя хэштег #AngularInAIStudio.

Команда Angular представила инструмент Web Codegen Scorer для улучшения генерации веб-кода с помощью ИИ. Этот инструмент помогает оптимизировать большие языковые модели (LLM) для текущего состояния фреймворка Angular и способствует интеграции развивающихся функций приложений. Он помогает анализировать и отлаживать распространенные сбои LLM, позволяя быстрее итеративно вносить улучшения. Web Codegen Scorer был разработан в сотрудничестве с экспертами по ИИ, безопасности и доступности для надежной оценки. Angular также сотрудничал с командой SolidJS, демонстрируя потенциал инструмента для улучшения генерации кода для других фреймворков. Инструмент имеет открытый исходный код для поощрения вклада сообщества и более широкого внедрения фреймворков. Angular v20.2 включает Angular MCP Server, предоставляющий кодирующим агентам встроенные инструменты для сеансов разработки. Будущие функции сервера MCP включают инструменты модернизации для миграции синтаксиса и локальный движок RAG для актуальной информации ИИ. Поддержка Angular была интегрирована в продукты Google AI, Gemini Canvas и Google AI Studio. Команда также исследует фреймворк, ориентированный на ИИ, уделяя особое внимание возможностям агентов для больших кодовых баз и минимизации распространенных проблем LLM. Они экспериментируют с форматами авторства и структурами приложений, обещая прозрачность в будущих разработках Angular. Команда Angular стремится поддерживать разработчиков в создании масштабируемых приложений с поддержкой ИИ.

Angular выпустил минорные обновления v20.1 и v20.2, уделяя особое внимание продуктивности разработчиков и улучшениям в области искусственного интеллекта. Важным событием является готовность zoneless Angular к продакшену, что предлагает такие преимущества, как меньший размер сборки и улучшенная отладка. Новые примитивы анимации, `animate.enter` и `animate.leave`, упрощают интеграцию нативных CSS-анимаций и объявляют устаревшим старый пакет `@angular/animations`. Команда расширяет предложения в области ИИ, предлагая руководства по созданию приложений на основе ИИ и улучшая инструменты кодирования с помощью ИИ. Они также работают над экспериментальным MCP-сервером для поддержки потребностей ИИ, таких как поиск документации и лучшие практики для LLM. Angular DevTools теперь включает визуализацию маршрутов и графы сигналов для лучшей отладки. Тестирование компонентов было упрощено благодаря поддержке передачи объектов привязки в `TestBed.createComponent`. Компонент `MatMenu` теперь может функционировать как контекстное меню, а `NgComponentOutlet` поддерживает пользовательские `EnvironmentInjector` для динамических компонентов. Дальнейшие улучшения включают обновленное руководство по маршрутизации, новый сигнал `currentNavigation`, свойство `destroyed` в `DestroyRef` и лучшую поддержку шаблонных операторов и ARIA-атрибутов. Angular теперь поддерживает TypeScript 5.9 и внес улучшения в `httpResource` и `httpClient`. Сообщество предоставило значительные отзывы для нового талисмана Angular, финальный дизайн которого будет представлен позднее в этом году.

Команды Angular и Chrome сотрудничали, чтобы привести данные и инсайты, специфические для Angular, непосредственно в панель производительности инструментов разработчика Chrome, создавая единый опыт профилирования для разработчиков. Это интеграция позволяет разработчикам сочетать преимущества обоих инструментов, предлагая более синхронизированный и всесторонний взгляд на производительность их приложения. Новый пользовательский трек для Angular в инструментах разработчика Chrome предоставляет данные производительности, используя концепции Angular, такие как инициализация приложения, компоненты, синхронизация пользовательского интерфейса и хуки жизненного цикла. Диаграммы пламени пользовательского трека группируют вызовы функций вместе под соответствующими компонентами и другими концепциями Angular, позволяя разработчикам детализировать до отдельных функций для более подробного просмотра. Входы диаграммы пламени кодируются цветом, чтобы помочь разработчикам быстро определить, что происходит в их приложении, отличая код приложения, другие сценарии или активности браузера. Цвета представляют различные аспекты приложения, такие как сервисы внедрения зависимостей, шаблоны, скомпилированные Angular, и точки входа. Пользовательский трек интерактивен, позволяя разработчикам кликнуть на вход в диаграмме пламени, чтобы открыть более подробную информацию о данном входе. Чтобы начать, разработчики должны убедиться, что они используют последнюю версию Angular и актуальную версию Chrome, запустить свое приложение Angular в режиме разработчика и включить пользовательский трек, набрав ng.enableProfiling() в консоли. Это интеграция демонстрирует продолжающуюся приверженность улучшению опыта разработчика в экосистеме Angular, наделяя разработчиков возможностью создавать более быстрые и эффективные приложения.

За последние пару лет Angular добился значительных успехов, включая реактивность с сигналами и бесзональные приложения. Последняя версия, Angular v20, сосредоточена на оттачивании незавершенных функций для надежного опыта разработки. Релиз стабилизирует API, такие как effect, linkedSignal и toSignal, а также продвигает бесзонный доступ к предварительной версии для разработчиков. Он также улучшает отладку с помощью Angular DevTools и сотрудничает с Chrome для создания настраиваемых отчетов Angular непосредственно в Chrome DevTools. В этом выпуске улучшен интерфейс разработчика с помощью обновлений руководств по стилю, проверки типов и поддержки языковых служб. Кроме того, он продвигает разработку GenAI и запускает запрос комментариев для официального талисмана Angular. В выпуске функции реактивности переведены в стабильную версию, включая API запросов сигналов, вычислений, ввода и просмотра. В нем также представлены экспериментальные API, включая API ресурсов и httpResource, для управления асинхронным состоянием с помощью Angular. Кроме того, он продвигает бесзонный предварительный просмотр для разработчиков и укрепляет Angular на сервере с помощью инкрементальной гидратации и настройки режима рендеринга на уровне маршрута. Наконец, он полирует опыт разработки с помощью анализа производительности в Chrome DevTools, а также дополнений и улучшений фреймворка.

Genkit 1.0, фреймворк для создания AI-приложений, теперь доступен для Node.js и Go, что позволяет создавать AI-интеграции, готовые к производственному использованию. Он разработан для использования на стороне сервера и предлагает библиотеки с открытым исходным кодом и инструменты для разработчиков. Разработчики Angular могут использовать Genkit через бэкенд на Node.js, интегрируя API Genkit в свой серверный код. Простой пример показывает подключение к модели, такой как Gemini 2.0 Flash, и генерацию текста. Для улучшения пользовательского опыта API streamFlow от Genkit обеспечивает потоковую передачу ответов, создавая эффект "AI-печати". Серверные потоки определяются с помощью API defineFlow от Genkit и структурированных ответов с использованием схем Zod. Genkit CLI и Developer UI предоставляют инструменты для тестирования, отладки и наблюдения за AI-взаимодействиями. Genkit поддерживает различные функции, такие как многоходовые диалоги, использование инструментов и рабочие процессы "человек в цикле". Упрощая интеграцию AI, Genkit позволяет разработчикам создавать инновационные веб-приложения с использованием AI на основе Angular и Firebase. Дополнительную информацию и обновления можно найти на angular.dev и firebase.google.com/docs/genkit.

Angular представляет новые API, включая экспериментальный API `resource()`, который позволяет разработчикам представлять результаты асинхронных операций в виде сигналов. API `httpResource` построен на основе примитива `resource` и использует `HttpClient` в качестве загрузчика, что упрощает выполнение HTTP-запросов. `httpResource` действует как фронтенд для `@angular/common/http` и выполняет HTTP-запросы через стек HTTP Angular, включая интерсепторы. По умолчанию, `httpResource` выполняет GET-запрос и возвращает JSON-ответ с типом `unknown`. Он отличается от `HttpClient` тем, что инициирует запрос немедленно, и если какие-либо исходные сигналы в вычислении запроса изменяются, будет сделан новый HTTP-запрос. `httpResource` позволяет создавать расширенные запросы, определяя объект запроса, аналогичный запросу в `HttpClient`. API имеет выделенные методы для других типов ответов, таких как текст, blob и arrayBuffer. `httpResource` предоставляет несколько сигналов, включая `value`, `status`, `error`, `isLoading`, `headers`, `statusCode` и `progress`. `httpResource` предлагает прямую интеграцию с библиотеками валидации схем, такими как Zod или Valibot, для обеспечения типобезопасности. `httpResource` доступен как экспериментальный API в Angular v19.2 и пока не готов для продакшена, но разработчикам рекомендуется попробовать его и предоставить обратную связь.

Angular выпустила версию 19.2, которая включает в себя новые API и экспериментальные функции для улучшения процесса разработки. В выпуске реактивность выходит за рамки синхронных операций с введением асинхронной реактивности с использованием нового httpResource и потоковой передачи ресурсов с помощью API rxResource. API ресурсов позволяет разработчикам взаимодействовать с асинхронными источниками данных, используя при этом преимущества сигналов. httpResource API предоставляет простой реактивный способ получения данных по протоколу HTTP, участвуя в системе реактивности Angular с помощью сигналов. API rxResource теперь поддерживает потоковую передачу нескольких ответов, что делает его полезным для сценариев, в которых несколько значений возвращаются из конечной точки. Шаблоны Angular также были улучшены за счет поддержки непомеченных литеральных выражений шаблонов, что упростило конкатенацию строк и экранирование. Другие обновления включают в себя новые миграции, такие как преобразование в самозакрывающиеся теги и поддержка типа Set в формах. Команда Angular ищет отзывы об API ресурса с помощью запроса комментариев. Angular v19.2 теперь доступен разработчикам, чтобы они могли обновиться и начать создавать отличные приложения. Новые разработчики могут начать разработку с Angular, посетив angular.dev/tutorials.

Программные системы масштаба предприятия часто реализуются несколькими кросс-функциональными командами, и для того, чтобы эти команды могли предоставлять новые функции эффективно, желательно свести к минимуму необходимость координации между ними. Это требует модуляризации, которая вертикализирует систему в низкозависимые области, за которые могут отвечать отдельные команды. Микрофронтенды - это архитектурный стиль, который обещает несколько преимуществ, таких как высокая степень автономии команд, но он также сопровождается многочисленными проблемами. Микрофронтенды приводят к отдельным процессам сборки, которые можно объединить с инкрементальными сборками для улучшения времени сборки. Эта функция также может быть использована без применения других аспектов, таких как выравнивание команд с отдельными приложениями или отдельными развертываниями. Однако индивидуально разработанные микрофронтенды могут расходиться в UI/UX, что приводит к неоднородному виду, и загрузка нескольких приложений увеличивает количество пакетов, которые необходимо скачать, что негативно влияет на время загрузки и увеличивает давление на память. Разделение приложения на низкозависимые части может быть лучшей практикой в целом, но часто бывает трудно четко определить границы между вертикалями, чтобы реализовать их как отдельные приложения. Интеграция их в общее решение добавляет дополнительную сложность, а переход от компиляции во время компиляции к интеграции во время выполнения имеет серьезные последствия. Команда Angular рекомендует проверять, подходят ли альтернативы, такие как реализация отдельных вертикалей в Monorepos. Однако также есть способы компенсировать недостатки микрофронтендов, такие как создание системы дизайна для помощи в согласованном UI/UX или ленивая загрузка отдельных частей системы. Native Federation - это проект сообщества, который обеспечивает тесную интеграцию с Angular CLI и позволяет реализовывать микрофронтенды с помощью Angular. Он позволяет приложению загружать части других отдельно собранных и развернутых приложений лениво и может делиться зависимостями, такими как Angular или RxJS, между хостом и удаленными. Чтобы настроить Native Federation, предоставляется схема, которая настраивает делегацию Native Federation Builder на ApplicationBuilder и создает файл конфигурации federation.config.js. Конфигурация присваивает уникальное имя удаленному или хосту и определяет, какие зависимости следует делиться. Удаленные также определяют экспортированные модули EcmaScript, которые можно загрузить в оболочку. Схема также добавляет код для инициализации Native Federation в main.ts и для загрузки компонента или конфигурации маршрутизации, экспортированной удаленным, традиционная ленивая загрузка объединяется с функцией loadRemoteModule Native Federation.

Команда Angular последние два с половиной года сосредоточена на улучшении опыта разработчика и производительности. Из-за быстро развивающейся технологической индустрии команда определяет долгосрочное видение и планирует работу на ежегодной, квартальной и релизной основе, оставаясь гибкой для адаптации к изменяющимся требованиям. Команда использует ежегодный опрос разработчиков для проверки предположений о потребностях разработчиков, получив более 10 000 ответов в 2024 году. Результаты опроса показывают, что 79% разработчиков используют последние две основных версии Angular, а 90% используют автономные компоненты, директивы и трубы. Результаты также указывают на улучшение общего удовлетворения разработчиков, с почти 90% разработчиков, сообщающих о удовлетворении фреймворком. Команда определила улучшения, такие как автономные компоненты, встроенный контроль потока и отложенные представления, как факторы, способствующие увеличению удовлетворения. Однако формат авторства компонентов и тестирование остаются ключевыми областями для улучшения. В 2025 году команда будет сосредоточена на инвестициях в ключевые области, чтобы помочь разработчикам Angular преуспеть, включая улучшение опыта разработчика, обеспечение принятия последних улучшений и оптимизацию производительности. Заметные проекты для 2025 года включают продвижение zoneless до версии для разработчиков, введение форм на основе сигналов и замену Karma новым тестовым запуском по умолчанию. Команда также будет развивать документацию Angular, чтобы отражать последние лучшие практики и увеличить видимость функций, которые помогают веб-разработчикам достичь своих целей.

Команда Angular представила новую миграцию, чтобы помочь разработчикам обновить свои декораторные входные данные до нового API сигналов. Сигнальные входные данные предоставляют обновления функциональности входных данных, сохраняя при этом совместимость функций с декораторными входными данными. Одной из основных причин для обновления является безопасность типов, которая позволяет разработчикам удалять хрупкие шаблоны кода. Сигнальные входные данные также упрощают мониторинг входных данных. Новый API можно использовать для рефакторинга кода, который использует хук жизненного цикла ngOnChanges для отслеживания обновлений входных данных. Миграцию можно запустить через Angular CLI или в виде действий по рефакторингу кода в VSCode. Инструментарий обновит объявления @Input и скорректирует ссылки на входные данные, вводя переменные при необходимости. Миграция настраиваема и имеет опции, чтобы помочь выбрать правильную стратегию для миграции кода. Команда Angular с нетерпением ждет продолжения движения вперед и реализации своего видения новой модели реактивности. Новый API сигналов, как ожидается, упростит умственную модель разработчиков Angular и сделает ее проще для рассуждения о синхронизации и потоке состояния.

За последние два года команда Angular сосредоточилась на улучшении опыта разработчика и производительности в каждом релизе. Последняя версия, v19, представляет собой несколько новых функций и улучшений, включая инкрементальную гидратацию, режим рендеринга на уровне маршрута и улучшенный опыт разработчика. Инкрементальная гидратация позволяет разработчикам указывать, какие части шаблона следует загружать и гидратировать на конкретных триггерах, что улучшает производительность. Режим рендеринга на уровне маршрута позволяет настраивать отдельные маршруты для рендеринга на стороне сервера, предварительного рендеринга или рендеринга на стороне клиента. Улучшения опыта разработчика включают замену модулей в горячем режиме для стилей и экспериментальную поддержку шаблонов HMR, автономные значения по умолчанию true, строгое соблюдение автономных правил и новую настройку инструментов тестирования.

Выход Angular v19 приближается, и разработчики готовятся к празднованию. Событие Angular v19 Developer Event состоится 19 ноября в 9:00 утра по тихоокеанскому времени. Чтобы отметить это событие, по всему миру организуются несколько встреч для просмотра прямой трансляции. В Буэнос-Айресе встреча для просмотра прямой трансляции будет проходить в прямом эфире на YouTube 19 ноября. Во Франции будут проведены несколько встреч для просмотра прямой трансляции в Нанте, Туре и Париже 19 ноября, регистрация доступна на Eventbrite. Angular Athens проводит виртуальную встречу для просмотра прямой трансляции на Discord 19 ноября. Встреча Angular Singapore организует очную встречу 19 ноября, регистрация доступна на LinkedIn. Эти встречи для просмотра прямой трансляции предоставляют отличную возможность узнать о последних функциях Angular, пообщаться с другими разработчиками и поделиться энтузиазмом по поводу нового выпуска. Они предлагают возможность связаться с сообществом Angular и отпраздновать новый выпуск. Не пропустите эти события и отметьте в календаре 19 ноября.

Процесс предварительного просмотра разработчиков в Angular позволяет разработчикам thửять API и функции до их продвижения в производство, и позволяет команде Angular настроить эти API на основе реального использования и обратной связи. Благодаря обратной связи по API effect(), команда определила несколько улучшений дизайна, которые решат реальные проблемы с функциональностью и опытом разработчика. Одно из изменений - это удаление флага allowSignalWrites, который был предназначен для поощрения хороших шаблонов, но в конечном итоге отталкивал использование effect() в случаях, когда было бы разумно обновлять сигналы. Вместо этого команда будет фокусироваться на других способах поощрения хороших шаблонов, включая добавление новых вспомогательных средств реактивности, где это необходимо. Также изменяется время запуска эффектов, теперь они запускаются в рамках иерархии компонентов во время обнаружения изменений. Это изменение nhằm сделать время запуска эффектов более предсказуемым и полезным, и решить ошибки вокруг эффектов, запускающихся слишком рано или слишком поздно. Большинство случаев использования API effect() продолжат работать как ожидается, но некоторые случаи использования могут быть затронуты, такие как эффекты против результатов запроса view и toObservable() входных сигналов. Команда Angular исправила около 100 случаев, где изменение времени запуска эффектов значительно повлияло на код во время тестирования в Google. В результате этих изменений API effect() останется в предварительном просмотре разработчиков по крайней мере до версии v19.0, с планами стабилизировать API в будущем минорном релизе. Команда Angular благодарит сообщество за обратную связь и поддержку, которые сыграли решающую роль в развитии Angular.

В Angular v19 по умолчанию для компонентов, директив и конвейеров будет установлено значение standalone: true, что упростит написание кода на Angular. Это изменение является следствием успеха функции standalone, представленной в версии v14, которая получила широкое распространение в экосистеме Angular. Функция standalone упрощает ленивую загрузку на уровне маршрутов, обеспечивает лучшую модель композиции поведения компонентов и позволяет загружать компоненты и директивы на уровне шаблона лениво. Существующие автономные компоненты будут иметь значение standalone: true удалено в качестве части ng update для v19, а существующие компоненты NgModule будут иметь значение standalone: false добавлено, чтобы обеспечить их дальнейшую работу. Опцию strictStandalone компилятора можно установить для обеспечения того, чтобы только автономные компоненты были написаны в приложении. Ничего не изменится для FormsModule и других библиотек npm с NgModules, а автономные компоненты могут продолжать импортировать зависимости NgModule по мере необходимости. Авторы библиотек не должны вносить никаких изменений, поскольку их компоненты будут работать правильно при импорте пользователями независимо от версии.

Angular 18.2 вводит поддержку изолированных модулей TypeScript, предлагая значительные улучшения производительности. Включив эту опцию, код TypeScript транслируется через пакетный менеджер, что приводит к увеличению скорости сборки в производственной среде до 10%. Пакетный менеджер, esbuild, оптимизирует выходной код, включая встраивание перечислений, и удаляет проходы оптимизации Babel для кода TypeScript. Чтобы включить эту функцию, добавьте "isolatedModules": true в раздел "compilerOptions" вашего файла tsconfig.json. Убедитесь, что опция "useDefineForClassFields" удалена или установлена в true для оптимального размера выходного кода. Чтобы узнать больше, обратитесь к документации TypeScript по изолированным модулям. Реализуя эти изменения, разработчики могут воспользоваться этой функцией, чтобы улучшить производительность сборки и создать эффективные приложения Angular.

Изменения в Google's Material Web Components (MWC) не влияют на Angular Material, поскольку он не использует или не зависит от MWC. Angular Material использует MDC Web внутри и переходит к форкингу и итерации кода из MDC Web внутри Angular Material, что не повлияет на API компонентов или вывод. В последнем выпуске Angular Material включены стили Material 3, поддержка CSS-переменных и схематики тематизации. Команда планирует расширять функции Angular CDK и документацию для улучшения разработки приложений. Angular Material остается активно поддерживаемым и разрабатываемым, предлагая разработчикам мощные инструменты для создания высококачественных интерфейсов.

Сессия Angular на Google I/O продемонстрировала демо-версию галереи генеративного искусства, сочетающую технологии AI, Angular и WebXR. Демо-версия использует API Imagen Vertex AI для генерации работ искусства, API Gemini для информативных объяснений и отображает работы в 3D-галерее. Галерея доступна через браузеры, AR или VR и предлагает погружающийся опыт. Deferrable Views Angular обеспечивают плавный пользовательский опыт, загружая 3D-модели в фоновом режиме, сохраняя видимое представление. Сигналы упрощают поток данных и уменьшают количество boilerplate-кода. Компоненты WebXR абстрагируют создание сцены и уменьшают количество boilerplate-кода. Server Side Rendering и Hydration значительно улучшают производительность, отмечается значительное улучшение времени первого и самого большого контентного рисунка. Улучшения Angular улучшают опыт разработчика за счет легкости использования и новых API. Код демо-версии доступен на GitHub, вдохновляя разработчиков создавать свои собственные проекты Angular, WebXR и AI.

Angular представляет новый синтаксис @let, позволяющий разработчикам определять и повторно использовать переменные внутри шаблонов. Этот синтаксис решает давнюю проблему в синтаксисе шаблонов Angular. Декларации @let позволяют определять переменные с значениями, полученными из выражений Angular. Эти переменные затем можно повторно использовать в течение всего шаблона, улучшая читаемость и поддерживаемость кода. В отличие от предыдущих решений, переменные @let имеют область видимости текущего представления и его потомков, улучшая организацию кода и предотвращая нежелательные столкновения переменных. Декларации @let являются только для чтения, а их значения пересчитываются во время обнаружения изменений, обеспечивая точность данных. Официальный синтаксис @let включает ключевое слово, имя переменной, оператор присваивания, выражение Angular и терминатор точки с запятой. Примеры иллюстрируют использование @let для определения переменных для отображения в шаблоне, включая сложные выражения с асинхронными трубами. Команда Angular просит обратную связь о новом синтаксисе @let, чтобы продолжать улучшать опыт разработчика.

Angular 18 представляет собой экспериментальную зону обнаружения изменений, предлагающую улучшенную производительность, составность и отладку. Angular.dev становится официальным сайтом документации, обеспечивая улучшенный пользовательский опыт. Компоненты Material 3, отложенные представления и встроенный контроль потока теперь стабильны, а также поддержка i18n для гидратации серверного рендеринга. Нативный async/await доступен для зонных приложений, уменьшая размеры пакета и улучшая отладку. Библиотека диспетчеризации событий от Google.com обеспечивает воспроизведение событий в Angular, сохраняя пользовательские события во время загрузки страницы. Angular DevTools обеспечивает улучшенную отладку процессов гидратации. Все компоненты Angular Material и CDK теперь полностью совместимы с гидратацией. Частичная гидратация находится в разработке, позволяя выполнять инкрементальную гидратацию после серверного рендеринга. Зонная детекция изменений улучшает составность для микрофронтендов и совместимость с другими фреймворками. Отложенные представления улучшают основные веб-метрики, а встроенный контроль потока обеспечивает лучшую производительность и эргономику.

Новая система делегирования событий Angular, вдохновленная Angular и Wiz, позволяет Dispatch Events, захватывая события до гидратации. Это предотвращает неработоспособные элементы интерфейса и улучшает пользовательский опыт. Dispatch Events использует JSAction, проверенную библиотеку, используемую в приложениях Google. Включив Dispatch Events, приложения Angular могут перестать терять события до гидратации и позволять пользовательскому взаимодействию сразу после загрузки страницы. Это важный шаг к более тонкому контролю над гидратацией, уменьшая количество JavaScript в критическом пути гидратации. Deferable Views будут лениво гидратироваться на сервере, чтобы минимизировать время ожидания для ответов на события. Будущие блоги предоставят подробности о том, как включать эту функцию с помощью публичных API. Это начинание закладывает основы для resumability Angular, как предлагает Wiz.

Angular и Wiz, два веб-фреймворка Google, имеют различные акценты: Angular приоритизирует опыт разработчика, а Wiz подчеркивает производительность. Однако растущий спрос на высокопроизводительные приложения с отличным опытом разработчика привел к слиянию их случаев использования. Чтобы решить эту задачу, Angular и Wiz сотрудничают, чтобы объединить лучшее из обоих миров. Angular принимает функции из Wiz, такие как тонкая загрузка кода и делегирование событий, для улучшения производительности. С другой стороны, Wiz принял библиотеку сигналов Angular, что привело к значительному улучшению производительности, устраняя необходимость вручную memoизировать код. Долгосрочной целью является постепенное слияние Angular и Wiz, открытие исходного кода функций Wiz через Angular, а также поощрение вклада сообщества через процесс RFC. Цель партнерства - улучшить фреймворк Angular и поощрить принятие серверного рендеринга для улучшения опыта конечного пользователя. Объединяя сильные стороны обоих фреймворков, Angular и Wiz стремятся революционизировать веб-производительность, что будет выгодно как разработчикам, так и конечным пользователям.

Angular v17.3 вводит улучшенный API для объявления выходов, доступный в предварительном просмотре для разработчиков. Новый API упрощает процесс объявления выходов в директивах и соответствует другим функциональным API, таким как сигнальные входы. Кроме того, он обеспечивает более точные типы для передаваемых значений, улучшая безопасность типов и уменьшая риск скрытых ошибок во время выполнения. Разработчики могут объявлять выходы с помощью функции output(), которая инициализирует поле класса и позволяет передавать значения, вызывая функцию .emit. Для выходов, основанных на потоках observable, можно использовать функцию outputFromObservable(). Новый API не является сигналом, а rather ergonomic улучшением, которое уменьшает объем кода-заполнителя. Он включает автоматическую очистку выходов при уничтожении директивы и улучшенную безопасность типов для передаваемых значений. Все выходы реализуют интерфейс OutputRef, предоставляя единый способ для разработчиков прослушивать выходы программно. Пакет interop RxJS включает функцию outputToObservable для прослушивания выходов в идиоматическом RxJS-образном виде. Новый API для выходов доступен в предварительном просмотре, и Angular призывает сообщество к обратной связи. Разработчики могут попробовать новые API, установив последнюю версию Angular с помощью ng update. Улучшенный API для выходов в Angular v17.3 предлагает несколько преимуществ, включая концептуальное соответствие другим функциональным API, упрощенный синтаксис, автоматическую очистку, улучшенную безопасность типов и единый программный просмотр. Разработчикам рекомендуется оставлять отзывы о новых API для выходов через комментарии, обсуждения GitHub или другие каналы. Отзывы будут использоваться для дальнейшего усовершенствования и стабилизации API.

Консоли освещения - это электронные устройства, используемые в театральном освещении для управления сценическими светильниками. Команда nstudio разработала Blackout, приложение для iPad, которое предоставляет те же функции, что и самостоятельные консоли. Приложение поддерживает протоколы управления DMX и Bluetooth-контроль через чипы LumenRadio TimoTwo. Blackout поддерживает постоянную скорость передачи данных к подключенным светильникам, обеспечивая гладкое пользовательское интерфейс с индикаторами реального времени и подробным управлением устройствами. Оно использует Angular 17+ и NativeScript 8+ для разработки, сочетая DI, шаблоны и управление состоянием Angular с оптимизированными для платформы виджетами NativeScript и интеграцией iOS CoreMIDI. Декларативная архитектура компонентов Angular, директивы и управление состоянием с помощью NgRx помогли создать сложные функции интерфейса, такие как режим MIDI Learn Mode и директива nsIf, которая улучшает производительность, отключая просмотр от обнаружения изменений до тех пор, пока это не потребуется. Сочетая Angular с NativeScript, команда смогла стилизовать виджеты UIKit с помощью Tailwind CSS и использовать платформенно-специфические API и техники. NgRx сыграл ключевую роль в обеспечении твердого слоя состояния для управления потоком данных и минимизации ненужных вычислений, в то время как NativeScript позволил использовать оптимизированные для платформы движки рендеринга для оптимальной производительности и естественного поведения устройства.

Angular 17.1 вводит сигнальные входы, реактивную альтернативу декораторным @Input() входам. Сигнальные входы улучшают качество кода и производительность за счет увеличения типовой безопасности, что позволяет легче интегрировать Angular-сигналы. Сигнальные входы позволяют разработчикам эффективно реагировать на изменения входов с помощью сигналов, поддерживая опциональные и обязательные входы. Сравнивая с @Input(), сигнальные входы автоматически маркируют компоненты OnPush как грязные, улучшая DX и открывая путь для Zoneless. Сигнальные входы используют мощь сигналов, позволяя эффективно отслеживать изменения и производить значения, уведомляя Angular о необходимости перерисовки. Потенциальные случаи использования включают декларацию и рендеринг, мониторинг изменений, производство значений и преобразования значений. Сигнальные входы поддерживают преобразования и псевдонимы, предоставляя гибкость в обработке сырых значений и удовлетворяя конкретным потребностям. Команда Angular рекомендует использовать сигнальные входы, как только они будут переведены в статус производства в будущей версии. Разработчикам рекомендуется оставлять отзывы о сигнальных входах в предварительном просмотре разработчика. Сокращенная запись для input() может вызвать путаницу из-за неявного использования undefined как начального значения. Входы теперь являются только для чтения, что потенциально может повлиять на приложения, которые полагались на обновление входов изнутри компонента.

Angular v17.2 представляет экспериментальную поддержку Material 3, обновлённой системы дизайна, основанной на последней спецификации Material Design для веба. В этом выпуске также представлены предварительные API для запросов сигналов и входных данных модели, повышающие реактивность и обеспечивая безопасность типов для запросов представления. Чтобы улучшить производительность, Angular DevTools теперь поддерживает отладку гидратации, а директива NgOptimizedImage предлагает автоматические плейсхолдеры и интеграцию с загрузчиком изображений Netlify. Angular CLI получает поддержку пакетного менеджера Bun, контроль предзагрузки Vite и возможности настройки postcss. Кроме того, команда Angular выражает благодарность за обратную связь сообщества в формировании этих современных API. Следующий основной выпуск, Angular v18, запланирован на май.