❓ Вопрос

Расскажите конкретный пример, как через фабрику провайдера (useFactory) реализовать условный выбор провайдера в зависимости от среды (например, production или development). Какие ключевые моменты нужно учесть?

✅ Ответ

Для условного выбора провайдера через useFactory необходимо реализовать функцию, которая возвращает нужный сервис в зависимости от текущей среды (например, process.env.NODE_ENV или Angular environment). Ключевые моменты: инжектирование необходимых зависимостей в фабрику через параметры, надежная проверка условий для выбора нужного класса, а также корректная регистрация провайдера с useFactory в массиве providers модуля или компонента. Это позволяет гибко подменять реализации без дополнительного изменения кода.

#lexicon #собеседование #angular #senior #angular_injection

❓ Вопрос

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

✅ Ответ

Управление жизненным циклом подписок в Angular компонентах предполагает своевременное отписывание, чтобы предотвратить утечки памяти. Часто используют оператор takeUntil с Subject, который вызывается в ngOnDestroy, либо применяют pipe с take или first для автоматического завершения подписки. Например, в ngOnDestroy вызывается next и complete у Subject, что завершает все подписки, связанные через takeUntil. Такой подход обеспечивает аккуратное управление ресурсами и поддерживает производительность приложения.

#lexicon #собеседование #angular #middle #angular_reactive

❓ Вопрос

Какие хуки из Angular применяете для оптимизации и контроля жизненного цикла HTTP-запросов в компонентах? Приведите примеры их использования.

✅ Ответ

Для управления жизненным циклом HTTP-запросов в компонентах Angular применяются хуки ngOnInit и ngOnDestroy. В ngOnInit обычно инициализируют и запускают HTTP-запросы через HttpClient. В ngOnDestroy важно отписываться от Observable из HTTP-запроса, чтобы избежать утечек памяти, используя подходы с ручной отпиской или оператор takeUntil. Это обеспечивает контроль и очистку ресурсов при уничтожении компонента.

#lexicon #собеседование #angular #junior #angular_http

❓ Вопрос

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

✅ Ответ

Для оптимизации времени сборки в Webpack применяются техники кэширования, такие как использование кеша загрузчиков (loader cache) и плагина HardSourceWebpackPlugin. Также важна настройка точек входа и разделение кода (code splitting) для уменьшения размера бандлов. Применение многопроцессного или многопоточного запуска через плагин thread-loader и настройка режима разработки с быстрым обновлением (Hot Module Replacement) также ускоряют сборку.

#lexicon #собеседование #angular #middle #frontend_tooling #frontend_core

#quiz #lexicon #собеседование #angular #junior #angular_modules

❓ Вопрос

Приведите пример, когда стандартный механизм change detection в Angular не сработает корректно, и опишите, каким образом можно решить эту проблему через манипуляции с NgZone или использованием markForCheck.

✅ Ответ

Стандартный механизм change detection в Angular может не сработать корректно, если изменения происходят вне зоны Angular, например, внутри колбэков сторонних библиотек или setTimeout без вызова Angular API. В таких случаях Angular не видит изменений, и view не обновляется. Для решения используют NgZone.run(), чтобы вручную вернуть выполнение к зоне Angular и запустить детекцию изменений, либо вызывают ChangeDetectorRef.markForCheck() для пометки компонента как нуждающегося в проверке в OnPush стратегии. Это позволяет избежать необходимости полного обхода дерева и повысить производительность.

#lexicon #собеседование #angular #senior #angular_lifecycle

#quiz #lexicon #собеседование #angular #senior

❓ Вопрос

Как в архитектуре data flow Angular организовать передачу закешированных данных между компонентами без дополнительного запроса к серверу?

✅ Ответ

Для передачи закешированных данных между компонентами в архитектуре data flow Angular следует использовать сервисы с BehaviorSubject или ReplaySubject, которые хранят текущее состояние данных и обеспечивают их реактивную передачу. Данные в сервисе запрашиваются один раз и сохраняются, что позволяет избежать дополнительных запросов к серверу при переходе между компонентами. Компоненты подписываются на эти observable, получая актуальные данные из кеша и автоматически обновляясь при изменениях.

#lexicon #собеседование #angular #junior

#quiz #lexicon #собеседование #angular #senior

❓ Вопрос

Как браузер управляет памятью при работе с DOM, и какие приемы используются для оптимизации производительности при манипуляциях с DOM-деревом?

✅ Ответ

Браузер выделяет и освобождает память для DOM-элементов, используя сборщик мусора, который удаляет объекты без ссылок. При манипуляциях с DOM рекомендуется минимизировать количество изменений, использовать DocumentFragment или клонирование узлов для пакетного обновления, а также применять отложенное или батчевое обновление для снижения числа перерасчетов стилей и перерисовок. Важно избегать утечек памяти через ссылки на удалённые элементы и очищать обработчики событий.

#lexicon #собеседование #angular #middle #frontend #core

📚 4000+ вопросов для подготовки к IT-собеседованиям

❓ Вопрос

Как конкретно в Angular вы реализуете автоматическую отписку от Observable при уничтожении компонента?

✅ Ответ

Для автоматической отписки в Angular обычно используют оператор takeUntil в сочетании с subject, который вызывается в ngOnDestroy. В компоненте создают subject, например, private destroy$ = new Subject<void>(), и в ngOnDestroy вызывают destroy$.next() и destroy$.complete(), что завершает поток подписок. Это позволяет избежать утечек памяти, гарантируя отписку от всех Observable при уничтожении компонента.

#lexicon #собеседование #angular #junior

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #senior

❓ Вопрос

Как реализовать динамическую форму с использованием FormArray, с возможностью добавлять и удалять элементы? Какие вопросы стоит учесть по UX при работе с такими формами?

✅ Ответ

Динамическая форма с FormArray реализуется путем создания массива контролов, который можно программно расширять или сокращать через методы push() и removeAt(). Каждый элемент FormArray представляет собой отдельный контрол или группу контролов, что позволяет гибко управлять структурой формы. При работе с такими формами важно учитывать UX, обеспечивая понятные кнопки добавления и удаления элементов, подтверждение удаления для предотвращения случайных действий, а также отображение ошибок валидации непосредственно возле изменяемых полей для своевременной обратной связи.

#lexicon #собеседование #angular #senior

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #middle #advanced

#quiz #lexicon #собеседование #angular #middle

#quiz #lexicon #собеседование #angular #junior #frontend

❓ Вопрос

Расскажите, как вы реализуете side effects в NgRx. Какие инструменты и подходы применяете для управления асинхронными запросами?

✅ Ответ

Для реализации побочных эффектов в NgRx применяется библиотека @ngrx/effects, которая позволяет слушать экшены и выполнять асинхронные операции, такие как HTTP-запросы. Реализуются эффекты с помощью операторов RxJS, например switchMap для отмены предыдущих запросов и catchError для обработки ошибок. Важно разделять чистую логику редьюсеров и side effects, обеспечивая предсказуемость и поддерживаемость состояния.

#lexicon #собеседование #angular #middle

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #junior #frontend

❓ Вопрос

Опишите, как можно реализовать вкладочную навигацию с сохранением состояния табов в URL с помощью Angular Router. Какая конфигурация маршрутов для этого требуется и какие преимущества такой подход даёт?

✅ Ответ

Для реализации вкладочной навигации с сохранением состояния в URL используется Angular Router с настройкой дочерних маршрутов (children), соответствующих каждому табу. В конфигурации маршрутов каждый таб представлен как отдельный путь внутри родительского маршрута, что позволяет менять часть URL при переключении табов без полной перезагрузки страницы. При выборе таба происходит навигация с помощью routerLink или программного вызова navigate, обновляющего URL. Такой подход обеспечивает сохранение состояния при обновлении страницы, возможность прямого перехода к конкретному табу по ссылке и улучшает поддержку истории браузера.

#lexicon #собеседование #angular #senior

📚 4000+ вопросов для подготовки к IT-собеседованиям

#quiz #lexicon #собеседование #angular #junior #babel