🦊 Angular Fox 🚀 — русскогорящие новости сообщества

✨ Web Components в Angular

Интегрируете Web Components в Angular и замечаете, что при первой загрузке все работает корректно, а после перехода на другую страницу и возврата компонент падает с ошибкой?

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

👉 https://dev.to/this-is-angular/web-components-in-angular-why-passing-inputs-breaks-on-navigation-52b6

✨ Код пишет нейросеть. Что остается разработчику?

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

Статья противопоставляет вайб-кодинг и хаотичные запросы к ИИ в надежде на чудо, структурированному подходу Spec-Driven Development.

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

👉 https://habr.com/ru/articles/974754/

✨ Как мы пережили несколько мажорных обновлений Angular

Разбор реального кейса миграции фронтенда. Команда прошла путь от Angular 13 до 19, внедрив Standalone Components, Vite и non‑destructive hydration.

Главная цель апдейта, избавиться от долгой пересборки Ivy и унифицировать UI, который разъехался за годы разработки.

👉 https://habr.com/ru/companies/compo/articles/977736/

✨ CSS Wrapped 2025

Команда Chrome DevRel представила обзор новых возможностей, которые появились в браузерах недавно.

Наконец-то CSS и HTML получили нативные инструменты для интерфейсов, которые раньше требовали JS или сложных хаков.

Спасибо Angular Meetup за новость.

👉 https://chrome.dev/css-wrapped-2025/

✨ Как работают современные браузеры

Браузер для большинства разработчиков — это черный ящик, который магическим образом превращает HTML, CSS и JS в интерактивные приложения.

Статья разбирает жизненный цикл веб-страницы: сетевой стек, парсинг HTML и построение DOM, работу CSS-движка и вычисление стилей, рендеринг, движок V8 и многое другое.

👉 https://habr.com/ru/companies/timeweb/articles/969508/

✨ Angular Q&A: Будущее Signal Forms

Главной темой недавней встречи с командой Angular стали Signal Forms, представленные в версии 21 в статусе experimental.

Обсудили текущее состояние фичи, ее стабильность и применение в реальных проектах.

Некоторые внутренние проекты Google уже начали использовать новые формы, что делает их, несмотря на статус, более стабильными, чем могло бы показаться.

Глобальных архитектурных сдвигов не ожидается, но команда оставляет за собой право вносить breaking changes для обработки граничных случаев.

👉 https://www.youtube.com/live/vnSaYHYLI0Q

✨ Кастомный билдер для Angular

В одном из обсуждений Алекс поделился опытом создания собственного билдера для Angular с поддержкой микрофронтенд-архитектуры.

Решение появилось как ответ на ограничения Native Federation и переросло в полноценный инструмент.

👉 https://dev.to/klerick/custom-builder-for-angular-my-way-12hd

✨ Реактивная Архитектура

Optimistic UI делает интерфейс мгновенно отзывчивым, но может привести к несогласованности состояния, а обработка ошибок сервера превращается в сложный код для отката изменений.

В статье предлагается декларативное решение на базе RxJS, вместо ручного сброса состояния при сбое используется паттерн компенсирующей транзакции.

👉 https://habr.com/ru/articles/974068/

✨ Angular Pipes

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

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

В статье глубокий технический разбор механики пайпов: от работы компилятора до интересных сценариев использования.

👉 https://medium.com/p/f616ec84fb8d

✨ Пример процесса работы с техническим долгом

Технический долг часто оседает на дне бэклога мертвым грузом: задачи копятся годами, оценки отсутствуют, а инициативы тонут в потоке продуктовых фич.

Tech Lead команды Skyeng Михаил Ефанов поделился опытом, как систематизировать этот процесс, выделив работу с техдолгом в отдельный предсказуемый поток, прозрачный и для команды, и для бизнеса.

👉 https://habr.com/ru/articles/962734/

✨ Не делайте рефакторинг как дядя Боб

Книга «Чистый код» Роберта Мартина считается классикой, но слепое следование ее догмам может навредить.

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

Вместо того чтобы упростить логику, «дядя Боб» превращает функцию в класс с лишними уровнями абстракции, получая код, в котором приходится прыгать по методам, чтобы понять суть простой операции.

P.S. Загляните в комментарии на Хабре: там предложили вариант реализации, который оказался даже лучше, чем у автора статьи.

👉 https://habr.com/ru/companies/ruvds/articles/970488/

✨ Прогресс в разработке TypeScript 7

Команда TypeScript поделилась апдейтом по Project Corsa — портированию языкового сервиса и компилятора на Go.

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

Компилятор также продемонстрировал значительный прогресс: он находит те же ошибки, что и TypeScript 5.9. Полная совместимость типизации подтверждена на 20 000 тестовых кейсов.

Также в него портировали такие флаги, как --incremental и --build. Это означает, что большинство проектов могут попробовать новую реализацию с минимальными изменениями.

👉 https://devblogs.microsoft.com/typescript/progress-on-typescript-7-december-2025/

✨ 90% Angular-разработчиков пишут легаси

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

В статье рассматриваются моменты, на которые стоит обратить внимание для улучшения кодовой базы. Среди ключевых тем: корректное управление подписками, отказ от чрезмерного использования any, преимущества OnPush и внедрение новых @for и @if.

P.S. Метрика в 90% в заголовке статьи выглядит сомнительно и не подкреплена данными. Вероятно, это просто художественное преувеличение автора, и в реальности ситуация не такая драматичная.

👉 https://habr.com/ru/companies/ruvds/articles/967016/

🍿 Проверьте свои Angular проекты, что нигде не используется Next.js и React Server Components: Critical 10/10

https://github.com/vercel/next.js/security/advisories/GHSA-9qr9-h5gf-34mp

🚨 Уязвимость Stored XSS

В Angular Template Compiler обнаружена Stored XSS уязвимость. Проблема кроется в неполной внутренней схеме безопасности, которая позволяет злоумышленникам обходить встроенную санитизацию при работе с определенными атрибутами (например, те, которые могут содержать javascript: URLs).

Кроме того, существует связанная уязвимость, затрагивающая элементы SVG-анимации. Атрибут attributeName у этих элементов не проходил должной валидации.

Как защититься:
Обновить версию Angular.
Убедитесь, что в уязвимые атрибуты не попадают сырые данные из недоверенных источников.
Настройте Content Security Policy (CSP).

👉 https://github.com/angular/angular/security/advisories/GHSA-v4hv-rgfq-gp49

✨ Документация Angular теперь на русском

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

Что интересного:
✅ Полностью переведены обучающие материалы.
✅ Можно пройти туториал и экспериментировать с кодом в песочнице прямо в браузере.

Важный нюанс:
Раздел "Справочник - API" остался без перевода. Это осознанное решение автора: информация там генерируется автоматически из комментариев в коде, и это затрудняет поддержку новых версий в будущем.

🐞 Если найдете ошибки или опечатки, можете сообщить о них в репозитории проекта.

👉 https://angular-docs.ru/

✨ TypeScript vs Elixir

Дэн Вандеркам (автор книги Effective TypeScript) прошел Advent of Code 2024 на Elixir и сравнил опыт разработки с привычным TS. Проделав не просто сравнение синтаксиса, а глубокий анализ того, как разные подходы к типизации и DX влияют на написание кода.

Ключевые тезисы из статьи:

Оператор |> в Elixir киллер-фича, но автор пришел к выводу, что в JavaScript без сопутствующего сахара он был бы не так удобен.

TypeScript приучил нас к тому, что поддержка IDE так же важна, как и сам компилятор. В Elixir с этим сложнее.

В Elixir внедряют систему опциональной постепенной типизации. Разработчикам на TypeScript это должно быть знакомо: TS в свое время провернул похожий трюк с JavaScript.

P.S. Advent of Code 2025 стартует уже сегодня. Планируете участвовать в этом году или, может быть, уже решали задачки прошлых лет? Делитесь в комментариях, какой язык выбрали и какие впечатления остались.

👉 https://effectivetypescript.com/2025/11/24/advent2024-elixir/

✨ Шесть способов учиться новому максимально быстро и эффективно

Обучение — процесс, который можно дебажить и оптимизировать. В статье разбираем ключевые идеи из бестселлера Барбары Оакли Learning How to Learn.

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

👉 https://habr.com/ru/companies/avito/articles/953972/

🚨 Утечка XSRF-токена в Angular HttpClient

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

Утечка токена полностью обходит встроенную защиту Angular от CSRF, позволяя злоумышленнику перехватить действительный XSRF-токен пользователя. Получив этот токен, атакующий может выполнять произвольные CSRF-атаки от имени сессии жертвы.

P.S. Спасибо Angular Munich за информацию.

👉 https://github.com/angular/angular/security/advisories/GHSA-58c5-g7wp-6w37

✨ Когда порядок решает, или почему я больше не доверяю сеттерам в Angular

Используете сеттеры с @Input()? Будьте осторожны, с приходом Ivy порядок атрибутов в шаблоне стал критичным. Теперь простая перестановка может сломать инициализацию компонента, даже если код написан идеально.

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

👉 https://habr.com/ru/companies/zyfra/articles/970150/