✨ Сохранение состояния компонента при переходе по маршруту

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

Статья рассказывает о применении RouteReuseStrategy для сохранения состояния компонентов.

👉 https://dev.to/this-is-angular/angular-lab-preserving-component-state-across-route-transitions-3f7j

✨ Улучшаем производительность с помощью NgOptimizedImage

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

Это напрямую влияет на метрики:

Largest Contentful Paint (LCP) — время, за которое загружается самый крупный контент, например, баннер. Высокий LCP ухудшает SEO и раздражает пользователей.

First Contentful Paint (FCP) — момент появления первого элемента на экране. Медленный FCP создает ощущение "зависания" сайта.

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

👉 https://www.angularspace.com/boost-your-apps-performance-with-ngoptimizedimage

✨ Гибкость и контроль над данными: применение моков в разработке

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

Для решения этой проблемы в статье предлагается использовать MSW (Mock Service Worker), который позволяет реализовать работу с HTTP API и WebSocket прямо внутри приложения.

👉 https://habr.com/ru/companies/ntechlab/articles/869790/

✨ TypeScript 5.8: erasableSyntaxOnly флаг

В следующем релизе TypeScript, вероятно, появится новый флаг, который будет запрещать конструкции, которые не являются "стираемыми" (erasable), такие как перечисления (enums), пространства имен (namespaces) и т.д.

Это новшество может быть связано с тем, что в Node.js 23.6.0 недавно появилась поддержка TypeScript, которая не поддерживает такие конструкции.

👉 https://www.totaltypescript.com/erasable-syntax-only

✨ Создание пользовательских операторов RxJs

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

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

👉 https://www.angularspace.com/create-custom-rxjs-operators/

✨ Введение в фикстуры Playwright

Устали от тонн моков и бесконечного дублирования в тестах? Знаете, что может сократить ваш код и сэкономить часы работы?

Фикстуры в Playwright — ваш секретный инструмент для чистых и эффективных тестов!

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

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

✨ Миграция крупного Angular-приложения на Standalone

Можно ли превратить огромный Angular-проект из лабиринта модулей в чистый и современный код?

Армен Варданян доказал — ДА! Его HR-система с 1000+ компонентов и множеством зависимостей теперь работает в разы быстрее и чище. И все это — всего за несколько часов.

Не верите, что такое возможно? Читайте статью и убедитесь сами: ваш проект тоже заслуживает апгрейда.

👉 https://www.angularspace.com/migrating-a-large-angular-application-to-standalone/

✨ «Я делаю рефакторинг ежечасно» или как за пять минут улучшить приложение

Рефакторинг — это не про гигантские правки, а про микрошаги, которые делают ваш код чище, быстрее и устойчивее к ошибкам.

Хотите узнать, как избавиться от спагетти-кода и не выгореть?

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

А чтобы углубить свои знания, рекомендуем книгу Мартина Фаулера «Рефакторинг кода на JavaScript».

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

✨ Внутри процесса архитектурного аудита

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

Статья посвящена архитектурному аудиту — инструменту, который помогает выявить скрытые проблемы и восстановить скорость разработки.

👉 https://www.angulararchitects.io/en/blog/inside-the-architecture-review-process-a-consultants-guide-to-better-software/

✨ Улучшите пользовательский опыт вашего приложения с помощью (rx)resource

Представьте: пользователи больше не видят белый экран при загрузке, ошибки не остаются незамеченными, а данные всегда актуальны. Все это возможно с новым resource API в Angular 19.

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

👉 https://timdeschryver.dev/blog/improve-the-user-experience-of-your-application-using-rxresource

🚀 Документалка об Angular

Канал Honeypot, известный документальными историями о технологиях, представил новый фильм о невероятной истории Angular — фреймворке, который начинался как эксперимент внутри Google и прошел путь от непризнания до мировой популярности.

Вы увидите, как ошибки, инновации и упорство превратили Angular в современный гигант.

👉 https://youtu.be/cRC9DlH45lA

✨ Как утекает память, если забыть отписаться от Observable

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

Всего одна забытая подписка на Observable может привести к утечке памяти.

Читайте статью — узнайте, как находить и устранять такие проблемы за несколько минут.

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

✨ Миграция на строгий TypeScript

Знакомая ситуация: проект на TypeScript, а strict режим включить страшно? В крупных проектах часто сталкиваются с той же проблемой — годы разработки, море any типов и никаких проверок на null.

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

👉 https://habr.com/ru/companies/selectel/articles/879980/

✨ Загрузка ресурсов

Мы уверены, что большинство уже знакомы с функцией resource().

Если же вы все еще сомневаетесь, попробуйте новый подход. Он упрощает работу с асинхронными данными в коде на основе сигналов.

Важно: Код, представленный в статье, носит исключительно демонстрационный характер и требует доработки.

👉 https://www.angularspace.com/loading-angular-resources-on-demand-a-progressive-guide-to-dynamic-data-fetching/

✨ Исследуем режимы рендеринга маршрутов

Раньше мы вынуждены были выбирать: либо SSR для всего приложения, либо никак. Но что, если часть страниц приватные, а часть — публичные?

Теперь для каждого маршрута можно выбрать оптимальный режим — клиентский (CSR), серверный (SSR) или статическую генерацию (SSG).

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

👉 https://dev.to/this-is-angular/exploring-routes-rendering-modes-in-angular-bjg

✨ Микрофронтенды с Angular и Native Federation

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

Микрофронтенды — секретное оружие enterprise-проектов. Они позволяют разбить монолит на автономные части, которые можно тестировать, деплоить и масштабировать независимо. Но Angular не поддерживает их из коробки. И тут на сцену выходит Native Federation.

👉 https://blog.angular.dev/micro-frontends-with-angular-and-native-federation-7623cfc5f413

✨ Улучшение шаблонов Angular с помощью нетегированных шаблонных литералов

В версии 19.2.0-next.0 ввели поддержку шаблонных литералов, сделав шаблоны выразительнее.

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

👉 https://medium.com/p/0baa5b4f8371

✨ Что такое LinkedSignal и как его использовать

Angular 19 представил функцию LinkedSignal — расширение стандартного computed, которое позволяет не только вычислять значения, но и изменять их.

Интересно, как это может упростить управление состоянием в ваших проектах?

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

👉 https://angular.love/what-linkedsignal-is-and-how-to-use-it

✨ Прекратите неправильно использовать Effects

Зачем усложнять код Effects, если Angular предлагает простое решение для синхронизации состояния?

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

В статье подробно рассматривается пример с компонентом выбора товара: при смене продукта linkedSignal автоматически сбрасывает значение.

👉 https://angularexperts.io/blog/stop-misusing-effects

✨ Простой трекер пользовательских событий

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

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

👉 https://www.angularspace.com/simple-user-event-tracker-in-angular/