Pytania rekrutacyjne Angular z odpowiedziami

Przykładowe pytania

Kilka pytań z każdego poziomu z poprawną odpowiedzią i wyjaśnieniem.

Angular · Junior

1. Czym jest Angular?

   Poprawna odpowiedź: Pełnym frameworkiem TypeScript od Google z komponentami, DI, routingiem, formularzami i HTTP w zestawie

   Angular to framework „wszystko w zestawie”: router, formularze, klient HTTP, DI, narzędzia testowe i CLI utrzymuje zespół Angulara. React to z kolei biblioteka renderująca, wokół której stos składa się samodzielnie.

2. Które polecenie tworzy nowy projekt Angular?

   Poprawna odpowiedź: ng new my-app

   Angular CLI (npm install -g @angular/cli) tworzy projekt przez ng new, uruchamia serwer deweloperski przez ng serve, generuje kod przez ng generate component name i buduje przez ng build.

3. Co oznacza standalone dla komponentu Angular?

   Poprawna odpowiedź: Komponent sam deklaruje zależności w imports, zamiast należeć do NgModule

   Komponenty standalone wymieniają używane komponenty, dyrektywy i pipe'y w imports. Od Angulara 19 komponenty są domyślnie standalone; NgModule nadal są wspierane, ale nie są już wymagane.

4. Jak uruchamia się aplikację Angular w trybie standalone?

   Poprawna odpowiedź: bootstrapApplication(App, appConfig) w main.ts

   bootstrapApplication renderuje komponent główny i przyjmuje ApplicationConfig z providers, np. provideRouter(routes) i provideHttpClient(). bootstrapModule to starszy sposób oparty na NgModule.

Angular · Middle

1. Co się zmienia, gdy komponent używa ChangeDetectionStrategy.OnPush?

   Poprawna odpowiedź: Angular sprawdza go tylko wtedy, gdy jest oznaczony: zmieniła się referencja wejścia, on lub potomek obsłużył zdarzenie, zmienił się odczytany sygnał lub async dostarczył wartość

   Przy strategii domyślnej każdy komponent jest sprawdzany przy każdym uruchomieniu change detection. OnPush pomija całe poddrzewa, które nie zostały oznaczone - to główna optymalizacja wydajności w aplikacjach opartych na Zone.js.

2. Kiedy potrzebny jest ChangeDetectorRef.markForCheck()?

   Poprawna odpowiedź: W komponencie OnPush, gdy stan zmienia się bez wiedzy Angulara, np. ręczny subscribe przypisuje zwykłe pole

   markForCheck oznacza komponent i jego przodków, by zostali sprawdzeni przy następnym uruchomieniu. Pipe async i sygnały robią to automatycznie, dlatego są lepsze od ręcznych subskrypcji.

3. Co oznacza ExpressionChangedAfterItHasBeenCheckedError?

   Poprawna odpowiedź: Powiązana wartość zmieniła się w tym samym przebiegu change detection po jej sprawdzeniu (wykrywane tylko w trybie deweloperskim)

   W trybie deweloperskim Angular wykonuje drugie sprawdzenie, by upewnić się, że dane płyną w jedną stronę. Zwykle przyczyną jest zmiana stanu rodzica w ngAfterViewInit potomka lub gettery zwracające za każdym razem nowe wartości. Napraw przepływ danych zamiast ukrywać błąd przez setTimeout.

4. Jak sygnały usprawniają change detection w porównaniu ze zwykłymi polami?

   Poprawna odpowiedź: Angular wie dokładnie, które szablony czytają zmieniony sygnał, i oznacza do odświeżenia tylko te komponenty

   Sygnał odczytany w szablonie rejestruje widok jako konsumenta. Gdy sygnał się zmienia, ten widok zostaje oznaczony jako brudny - nawet w komponencie OnPush - bez polegania na tym, że Zone.js zgadnie, że coś mogło się zmienić.

Angular · Senior

1. Jak Zone.js informuje Angulara, kiedy uruchomić change detection?

   Poprawna odpowiedź: Patchuje asynchroniczne API przeglądarki (zdarzenia, timery, promise'y, XHR) i powiadamia Angulara o zakończeniu zadania, co wywołuje ApplicationRef.tick()

   Zone.js nie wie, *co* się zmieniło, tylko że zakończyła się praca asynchroniczna, więc Angular sprawdza drzewo od korzenia (pomijając nieoznaczone poddrzewa OnPush). To proste, ale może powodować wiele niepotrzebnych sprawdzeń.

2. Jak włączyć zoneless change detection?

   Poprawna odpowiedź: Dodać provideZonelessChangeDetection() do providerów aplikacji i usunąć zone.js z polyfills

   W najnowszych wersjach Angulara nowe projekty są domyślnie tworzone jako zoneless. Usunięcie Zone.js zmniejsza bundle, upraszcza stack trace'y i eliminuje zbędne sprawdzenia.

3. Które z poniższych w aplikacji zoneless NIE planuje change detection?

   Poprawna odpowiedź: Callback setTimeout przypisujący nową wartość zwykłemu polu klasy

   Bez Zone.js Angular polega na jawnych powiadomieniach: zmianach sygnałów, markForCheck() (używanym też przez async), ComponentRef.setInput, listenerach szablonu/hosta i dołączaniu brudnych widoków. Zmiana zwykłego pola w timerze jest niewidoczna.

4. Który styl komponentów jest już zgodny z zoneless change detection?

   Poprawna odpowiedź: Komponenty OnPush, których stan żyje w sygnałach lub przechodzi przez async/markForCheck

   Jeśli komponent działa poprawnie z OnPush, najpewniej jest gotowy na zoneless. API takie jak NgZone.onStable/onMicrotaskEmpty bez Zone.js nie emitują i należy je zastąpić afterNextRender lub sygnałami.

Testy łączone z tym tematem

Pytania z kilku tematów naraz - jak na rozmowie rekrutacyjnej na konkretne stanowisko.