Питання на співбесіді з Angular з відповідями

Приклади запитань

Кілька запитань із кожного рівня з правильною відповіддю й поясненням.

Angular · Junior

1. Що таке Angular?

   Правильна відповідь: Повноцінний TypeScript-фреймворк від Google: компоненти, DI, роутинг, форми та HTTP з коробки

   Angular - фреймворк «усе включено»: роутер, форми, HTTP-клієнт, DI, інструменти тестування й CLI підтримує команда Angular. React натомість - бібліотека рендерингу, навколо якої стек збирають самостійно.

2. Яка команда створює новий проєкт Angular?

   Правильна відповідь: ng new my-app

   Angular CLI (npm install -g @angular/cli) створює проєкт через ng new, запускає dev-сервер через ng serve, генерує код через ng generate component name і збирає через ng build.

3. Що означає standalone для компонента Angular?

   Правильна відповідь: Компонент сам оголошує залежності в imports, а не належить до NgModule

   Standalone-компоненти перелічують використані компоненти, директиви й пайпи в imports. Починаючи з Angular 19 компоненти standalone за замовчуванням; NgModule досі підтримуються, але вже не обов'язкові.

4. Як запускається standalone-застосунок Angular?

   Правильна відповідь: bootstrapApplication(App, appConfig) у main.ts

   bootstrapApplication рендерить кореневий компонент і приймає ApplicationConfig з providers, наприклад provideRouter(routes) і provideHttpClient(). bootstrapModule - старий спосіб на основі NgModule.

Angular · Middle

1. Що змінюється, коли компонент використовує ChangeDetectionStrategy.OnPush?

   Правильна відповідь: Angular перевіряє його, лише коли він позначений: змінилося посилання у вході, він чи нащадок обробив подію, змінився прочитаний сигнал або async видав значення

   За стратегії за замовчуванням кожен компонент перевіряється під час кожного запуску change detection. OnPush пропускає цілі піддерева, які не були позначені, - це головна оптимізація продуктивності в застосунках на Zone.js.

2. Коли потрібен ChangeDetectorRef.markForCheck()?

   Правильна відповідь: В OnPush-компоненті, коли стан змінюється без відома Angular, наприклад ручний subscribe присвоює звичайне поле

   markForCheck позначає компонент і його предків, щоб їх перевірили під час наступного запуску. Пайп async і сигнали роблять це автоматично, тому вони кращі за ручні підписки.

3. Що означає ExpressionChangedAfterItHasBeenCheckedError?

   Правильна відповідь: Прив'язане значення змінилося в тому самому проході change detection після його перевірки (виявляється лише в dev-режимі)

   У розробці Angular виконує повторну перевірку, щоб переконатися, що дані течуть в один бік. Зазвичай причина - зміна стану батька в ngAfterViewInit нащадка або гетери, що щоразу повертають нові значення. Виправте потік даних, а не ховайте помилку через setTimeout.

4. Чим сигнали покращують change detection порівняно зі звичайними полями?

   Правильна відповідь: Angular точно знає, які шаблони читають змінений сигнал, і позначає для оновлення лише ці компоненти

   Сигнал, прочитаний у шаблоні, реєструє представлення як споживача. За зміни сигналу це представлення позначається брудним - навіть в OnPush-компоненті, - без розрахунку на те, що Zone.js вгадає, що щось могло змінитися.

Angular · Senior

1. Як Zone.js повідомляє Angular, коли запускати change detection?

   Правильна відповідь: Він патчить асинхронні API браузера (події, таймери, проміси, XHR) і сповіщає Angular про завершення задачі, що запускає ApplicationRef.tick()

   Zone.js не знає, *що* змінилося, - лише що завершилася асинхронна робота, тому Angular перевіряє дерево від кореня (пропускаючи непозначені OnPush-піддерева). Це просто, але може давати багато зайвих перевірок.

2. Як увімкнути zoneless change detection?

   Правильна відповідь: Додати provideZonelessChangeDetection() у провайдери застосунку й прибрати zone.js з polyfills

   В останніх версіях Angular нові проєкти за замовчуванням створюються zoneless. Відмова від Zone.js зменшує бандл, робить стектрейси чистішими й позбавляє зайвих перевірок.

3. Що з переліченого в zoneless-застосунку НЕ запускає change detection?

   Правильна відповідь: Колбек setTimeout, що присвоює нове значення звичайному полю класу

   Без Zone.js Angular спирається на явні сповіщення: зміни сигналів, markForCheck() (його використовує й async), ComponentRef.setInput, слухачі шаблону/host і під'єднання брудних представлень. Зміна звичайного поля в таймері лишається непоміченою.

4. Який стиль компонентів уже сумісний із zoneless change detection?

   Правильна відповідь: OnPush-компоненти, чий стан живе в сигналах або проходить через async/markForCheck

   Якщо компонент коректно працює з OnPush, він найімовірніше готовий до zoneless. API на кшталт NgZone.onStable/onMicrotaskEmpty без Zone.js не спрацьовують - їх замінюють на afterNextRender або сигнали.

Збірні тести з цією темою

Запитання з кількох тем одразу - як на співбесіді на конкретну вакансію.