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

🚨 Уязвимость 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/

✨ Как собрать экосистему компонентов на Angular и Nx При масштабировании проекта поддержка множества отдельных репозиториев часто приводит к аду зависимостей, дублированию логики, компонентов и т.д. Ильи Чубко показал, как построить единую экосистему компонентов, от организации структуры до настройки CI/CD с использованием nx affected. Отдельное внимание уделено Dependency Injection: показано, как через DI адаптировать приложение под разные среды выполнения. 👉 https://habr.com/ru/companies/k2tech/articles/960600/

✨ Цветовая модель OKLCH OKLCH — современная цветовая модель, которая решает главную проблему RGB и HSL: визуальную неоднородность. Теперь цвета с одинаковой яркостью действительно выглядят одинаково, а оттенки не плывут при изменении параметров. В основе три параметра: яркость (Lightness, 0–100%), насыщенность (Chroma, варьируется от серого до наиболее интенсивного оттенка) и оттенок (Hue, 0–360). На практике это означает: можно создать, например, набор кнопок разных цветов, меняя только Hue и все они будут восприниматься визуально согласованно. 👉 https://habr.com/ru/articles/940800/

✨ Angular 21 – что нового? Обзорный пост с главными фичами мы уже публиковали, теперь переходим к практике. Как именно новый релиз меняет ваш повседневный опыт взаимодействия с фреймворком? В статье детальный разбор того, как новые фичи выглядят в коде. P.S. Если вы еще не посмотрели Developer Event, очень рекомендуем глянуть запись. Там не только презентация новинок, но и знакомое лицо из русскоговорящего сообщества (возможно, вы его узнаете 😉). 👉 https://angular.love/angular-21-whats-new

✨ URL как контейнер состояния URL — это не просто адрес ресурса, а один из самых древних и изящных инструментов для управления состоянием в веб-приложениях. Фронтендеры часто забывают об этой функции, прибегая к сложным абстракциям наподобие глобальных сторов, в то время как URL по умолчанию дает вам возможность делиться состоянием. 👉 https://habr.com/ru/articles/962828/

✨ Релиз Angular v21 Команда Angular представила мажорное обновление, которое фокусируется на улучшении Developer Experience, развитии реактивной модели на базе сигналов и подготовке экосистемы к работе с AI-агентами. Ключевые нововведения: Экспериментальные Signal Forms — новый способ для работы с формами. Состояние полей синхронизируется через сигналы, без лишних бойлерплейтов. Angular Aria — библиотека доступных headless-компонентов. Вы получаете готовую логику и поведение, а стилизацию настраиваете полностью под себя. Zoneless по умолчанию в новых проектах zone.js больше не подключается автоматически. Vitest официально стал тест-раннером по умолчанию для новых проектов. MCP Server в CLI с инструментами для AI-агентов. Плюс мелкие, но приятные фичи: регулярки в шаблонах, дополнительные параметры для @defer, обновление CLDR и многое другое. Также напоминаем, что Developer Event начинается через несколько часов на YouTube. 👉 https://blog.angular.dev/announcing-angular-v21-57946c34f14b

✨ Как решать LeetCode? Легко! Нужно просто… Знакомая ситуация: прорешал множество задач, но на интервью видишь незнакомое условие и впадаешь в ступор, не зная, с какой стороны подступиться? Прорешав более 1500 задач, автор статьи пришел к важному выводу: успех на алгоритмическом собеседовании зависит не от того, сколько задач вы забрутфорсили, а от владения ключевыми шаблонами. 👉 https://habr.com/ru/articles/964104/

✨ Кастомные формы в Angular Создание кастомных компонентов форм в Angular долгое время означало борьбу с бойлерплейтом. Но с приходом Signal Forms и нового интерфейса FormValueControl этот процесс стал кардинально проще и логичнее. На примере формы подачи доклада на конференцию, в статье наглядно демонстрируется, как Signal Forms превращают создание контролов из рутины в удовольствие. 👉 https://medium.com/p/3860dcdb5a03

✨ Signal Forms: Debouncing В RxJS есть оператор debounceTime, который передает только последнее значение после того, как прошло заданное время бездействия. Это полезно при работе с событиями высокой частоты, такими как ввод текста пользователем. Поскольку Angular активно развивает экосистему на основе сигналов и движется к тому, чтобы сделать RxJS опциональным во многих сценариях, возникает логичный вопрос: "Как реализовать дебаунс без RxJS? Писать свои утилиты?" К счастью, в этом нет необходимости. Дебаунс не добавят в сам примитив signal. Сигналы по своей природе синхронны и предназначены для хранения и синхронизации состояния. Дебаунс же — это асинхронная операция, связанная с обработкой событий. Поэтому логику дебаунса встраивают не в сигналы, а туда, где она нужнее всего, в новые Signal Forms. 👉 https://github.com/angular/angular/pull/64929

✨ Эксперимент с MCP-сервером Angular получил экспериментальный MCP-сервер — протокол взаимодействия между ИИ-клиентами и внешними сервисами. Он умеет подсказывать best practices, искать документацию и даже работать с локальным workspace. Алиса Дункан проверила, насколько далеко можно зайти в создании приложений почти не касаясь клавиатуры. P.S. В Берлине только что прошла NG-DE — комьюнити-конференция по Angular в Германии. И вот вам запись с интересным докладом. 👉 https://dev.to/angular/a-quick-vibe-code-experiment-with-angulars-mcp-server-3g2h

✨ Что происходит внутри Angular и React при решении одних и тех же задач React и Angular часто сравнивают. Оба инструмента решают одну задачу: отрисовка и обновление UI. Но делают это совершенно по-разному. React работает через Virtual DOM, а Angular с помощью Ivy генерирует инструкции, которые эффективно обновляют DOM. Полина Цуканова разобрала шесть типовых сценариев: от рендера компонента до управления состоянием. Хотя в статье и есть небольшие неточности, она отлично иллюстрирует фундаментальные различия в их архитектуре. 👉 https://habr.com/ru/companies/selectel/articles/965586/

✨ TypeScript: краткий гайд по дистрибуции типов Если вы когда-нибудь удивлялись, почему string | number иногда превращается в (string | number)[], а иногда в string[] | number[], добро пожаловать в мир дистрибуции типов. Это одно из самых мощных и часто недооцененных свойств TypeScript, которое определяет, как обрабатываются union-типы в условных выражениях и шаблонных строках. 👉 https://habr.com/ru/companies/cloud_ru/articles/883872/

✨ Angular v21 переходит на Zoneless Angular v21 станет первым мажорным релизом, в котором новые приложения по умолчанию используют "бесзонное" (zoneless) обнаружение изменений. Это означает, что мы прощаемся с zone.js. Бандлы станут меньше, стек-трейсы чище, а обнаружение изменений будет срабатывать только тогда, когда вы этого хотите. В статье вы также найдете краткое руководство о том, как перевести ваше приложение на новый режим. Спойлер: это довольно просто. P.S. Хотите сделать Angular еще лучше? Давайте поможем Александру Инкину. Поддержите его предложение на GitHub лайком 👍 👉 https://push-based.io/article/angular-v21-goes-zoneless-by-default-what-changes-why-its-faster-and-how-to

✨Angular v21: Приключение начинается Команда Angular анонсировала мероприятие, посвящённое релизу Angular v21, которое состоится 20 ноября на YouTube. Что нас ждет: 🤖 Новые инструменты Angular MCP Server для улучшения рабочих процессов и генерации кода с поддержкой ИИ 🧩 Первый взгляд на Signal Forms — упрощенный подход к формам, основанный на сигналах 🧭 Интересные подробности о новом пакете Angular ARIA И это лишь малая часть того, что готовит для нас релиз, не забудьте запастись попкорном! Отдельное спасибо NG Stream за новость 👉 https://angular.dev/events/v21

🕒 Тесты против времени Работа со временем в юнит-тестах один из самых болезненных аспектов. Особенно когда в коде полно setTimeout, debounce и прочих асинхронных операций. Но есть простое решение: mock-часы, которые двигают время автоматически. Это позволяет тестам выполняться быстрее и реалистичнее, без необходимости вручную тикать таймеры и ждать фиксированное время, которое в будущем может измениться. Новая функциональность уже доступна в Jasmine 5.7, а также в @sinonjs/fake-timers 15, используемой в Jest и Vitest. 👉 https://blog.angular.dev/handling-time-and-mock-clocks-in-tests-5a393b32dd30