Co to jest NgModule?

Question

Accepted Answer

**NgModule** to klasa ozddobiona `@NgModule`, która grupuje powiązane komponenty, dyrektywy, potoki i usługi w spójny blok, informując Angular, jak je kompilować i łączyć ze sobą. (Uwaga: współczesny Angular coraz bardziej faworyzuje **komponenty autonomiczne** zamiast NgModules, jednak zrozumienie NgModules jest nadal niezbędne dla większości istniejących baz kodu.)

## Anatomia NgModule

```ts
import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  declarations: [UserListComponent, UserCardComponent], // components/directives/pipes THIS module owns
  imports: [CommonModule, FormsModule],                 // other modules whose exports we need
  exports: [UserListComponent],                          // what we make available to importers
  providers: [UserService],                              // services (DI) provided by this module
})
export class UsersModule {}
```

## Cztery kluczowe tablice

```text
declarations → components, directives, and pipes that BELONG to this module
imports      → other NgModules whose exported features this module needs
exports      → the subset of declarations/modules made available to importers
providers    → services registered for dependency injection
```

Komponent może być zadeklarowany tylko w **jednym** module i musi być zadeklarowany (lub zaimportowany jako autonomiczny), aby mógł być użyty w szablonach tego modułu.

## Moduł główny

```ts
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  bootstrap: [AppComponent], // the root component to launch
})
export class AppModule {}
```

Każda aplikacja (nie-autonomiczna) ma główny `AppModule` z tablicą `bootstrap` podającą nazwę komponentu startowego.

## Moduły funkcji i organizacja

```text
AppModule (root) → imports → UsersModule, AdminModule, SharedModule
```

Aplikacje są zorganizowane w **moduły funkcji** (po jednym na obszar domeny) i **moduł współdzielony** (wspólne komponenty/potoki), utrzymując kodę modułową i umożliwiając ładowanie z opóźnieniem na funkcję.

## Przejście do autonomicznych

```ts
@Component({ standalone: true, imports: [CommonModule], ... }) // no NgModule needed
```

Współczesny Angular pozwala komponentom być **autonomiczne** — deklarować swoje własne zależności bezpośrednio — zmniejszając lub eliminując boilerplate NgModule.

## Dlaczego to ważne

NgModules to tradycyjny mechanizm organizacji i okablowania zależności Angular — zrozumienie `declarations`/`imports`/`exports`/`providers` jest niezbędne do poruszania się po większości istniejących aplikacji Angular i zrozumienia leniwego ładowania.

Chociaż nowy kod zmierza w stronę komponentów autonomicznych, wiedza na temat NgModule pozostaje niezbędna do praktycznej pracy z Angular.