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

✨ Недостающий ингредиент для покрытия кода шаблонов

Независимо от того, используете ли вы Karma, Jest или Vitest, вероятно, вы используете компиляцию Just-In-Time (JIT) для своих тестов, поскольку до недавнего времени это был единственный доступный вариант.

Хорошая новость заключается в том, что теперь вы можете включить компиляцию Ahead-Of-Time (AOT) для тестов, чтобы получить более точное покрытие кода шаблонов и ускорить их выполнение. Пока эта возможность доступна только для Vitest, но, возможно, в скором времени она появится в Karma и Jest.

👉 https://marmicode.io/blog/angular-template-code-coverage-and-future-proof-testing

✨ Angular 19 и ZoneLess

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

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

👉 https://danywalls.com/angular-19-and-zoneless

✨ Самая сложная директива Taiga UI

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

Александр Инкин представил директиву ActiveZone, которая используется в библиотеке компонентов Taiga UI.

👉 https://habr.com/ru/companies/tbank/articles/863842/

✨ Рецепты TypeScript: перевод ключей объекта в camelCase

Работа с данными из API часто требует преобразования форматов. Одна из распространённых задач — перевод ключей объектов из snake_case, используемого на бэкенде, в camelCase, привычный для фронтенда.

Константин Логиновских показал, как преобразовать тип объекта в TypeScript так, чтобы все ключи преобразовывались из snake_case в camelCase.

👉 https://habr.com/ru/companies/cloud_ru/articles/860778/

✨ Динамические формы в Angular 19

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

В статье представлен практический подход к реализации динамических форм с использованием standalone компонентов.

👉 https://dev.to/this-is-angular/dynamic-forms-in-angular-creating-flexible-and-scalable-user-interfaces-2hob

✨ Angular 19: Скрытые жемчужины обновления

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

Сегодня рассмотрим полезные дополнения в Angular 19, которые могли остаться незамеченными за последние недели.

👉 https://www.angularspace.com/angular-v19-no-signals-edition/

✨ Продвинутая регистрация multi-сервисов

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

В этой статье рассмотрен оригинальный подход к регистрации multi-сервисов.

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

✨ Берем чужие сайты под свой контроль

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

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

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

✨ Магия Injection Context

Благодаря возможности вызывать функцию inject() на любом уровне вложенности внутри Injection Context можно легко создавать универсальные и гибкие утилиты.

Святослав Зайцев показал, как раскрыть потенциал этой функции.

👉 https://habr.com/ru/companies/tbank/articles/861172/

✨ Создаем современные npm-пакеты

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

Основная сложность заключается в несовместимости CommonJS (CJS) и ECMAScript modules (ESM).

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

👉 https://habr.com/ru/companies/ozontech/articles/857954

✨ Как я писал плагин для TypeScript

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

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

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

👉 https://habr.com/ru/companies/dododev/articles/858308/

✨ Как с помощью Angular доработать CRM-систему

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

Илья Чубко рассказал о своем опыте доработки CRM-системы, адаптируя ее под уникальные потребности заказчика, которые невозможно реализовать средствами платформы.

👉 https://habr.com/ru/companies/k2tech/articles/860270/

✨ Все о Resource API

Вчерашний релиз Angular вызвал вопросы о новом Resource API и способах миграции на него.

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

В этой статье представлены практические примеры, которые помогут вам уверенно освоить новое API и применять его в будущем.

👉 https://www.angularspace.com/everything-you-need-to-know-abour-resource-for-now/

✨ Представляем Angular 19

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

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

Основные моменты:

Инкрементальная гидратация — поддерживает самые требовательные к производительности сценарии.

Стабилизация ключевых реактивных примитивов и добавление новых: linkedSignal и resource.

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

Схематики, которые помогут вам быть в курсе лучших практик: inputs, outputs, queries, внедрение зависимостей на основе inject и новая система сборки.

🎉 Также поздравляем Кира с присоединением к команде Angular Core!

👉 https://blog.angular.dev/meet-angular-v19-7b29dfd05b84

Привет!

Мы знаем, что вы до сих пор спите и видите сны на TypeScript! 🌟
Мы прекрасно знаем, как вы любите Angular. Сейчас ещё есть возможность зарегистрироваться на Angular Meetup #23.

Мы будем обсуждать текущее состояние Angular и что нас ждет. Узнаем, сколько версий фреймворка нужно пропустить, чтобы считать свой проект устаревшим. 👩‍💻

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

✅ Если ты с нами
1️⃣ Регистрируйся здесь
2️⃣ Добавляй напоминание в календарь
3️⃣ Поделись этим сообщением с друзьями - чем больше нас будет, тем веселее!

Если не получится прийти на митап, можно посмотреть трансляцию онлайн.

✨ Релиз Angular 19: Присоединяйтесь к просмотру

Релиз Angular 19 уже на подходе, и разработчики по всему миру готовятся к празднованию. Мероприятия стартуют 19 ноября.

Если вы увлечены Angular, то это отличная возможность узнать о его новых возможностях, пообщаться с другими разработчиками и поделиться своим мнением. Не пропустите!

👉 https://blog.angular.dev/angular-v19-release-join-the-watch-parties-45f552d49554

✨ Создание кастомного rxResource

Angular приближается к выпуску 19-й версии, однако многие проекты все еще работают на старых версиях.

Поскольку в этих версиях широко используются Observables, автор решил создать аналог rxResource, основанный на RxJS, вместо сигналов.

👉 https://www.angularspace.com/creating-custom-rxresource-api-with-observables/

✨ Магия с interceptors

Interceptors — это функции, о которых многие слышали, но редко используют за пределами аутентификации. Однако существует множество случаев, когда перехватчики могут быть полезны.

В статье рассмотрены интересные и достаточно распространенные сценарии, в которых они могут пригодиться.

👉 https://www.angularspace.com/magic-with-interceptors/

✨ Новый экспериментальный API

Несмотря на то, что Resource и rxResource все еще находятся на стадии предварительного просмотра, они обещают существенно изменить подход к работе с данными.

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

👉 https://dev.to/this-is-angular/angular-19-streamlining-data-retrieval-with-resource-and-rxresource-apis-3lb2

✨ 5 функций, которых стоит ожидать

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

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

👉 https://dev.to/this-is-angular/angular-19-5-game-changing-features-you-need-to-know-32cd