Что такое NgModule?

Question

Что такое NgModule?

IT Interview Practice · Accepted Answer

**NgModule** — это класс, украшенный `@NgModule`, который группирует связанные компоненты, директивы, pipes и сервисы в согласованный блок, указывая Angular, как их компилировать и соединять вместе. (Примечание: современный Angular все больше отдает предпочтение **автономным компонентам** вместо NgModules, но понимание NgModules все еще необходимо для большинства существующих кодовых баз.)

## Анатомия 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 {}
```

## Четыре ключевых массива

```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
```

Компонент может быть объявлен только в **одном** модуле и должен быть объявлен (или импортирован как автономный), чтобы быть использованным в шаблонах этого модуля.

## Корневой модуль

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

Каждое приложение (не-автономное) имеет корневой `AppModule` с массивом `bootstrap`, указывающим стартовый компонент.

## Функциональные модули и организация

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

Приложения организованы в **функциональные модули** (по одному на область домена) и **общий модуль** (общие компоненты/pipes), сохраняя модульность кодовой базы и позволяя ленивую загрузку для каждой функции.

## Переход к автономным

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

Современный Angular позволяет компонентам быть **автономными** — объявляя свои собственные зависимости напрямую — уменьшая или устраняя NgModule boilerplate.

## Почему это важно

NgModules — это традиционный механизм организации и связывания зависимостей Angular — понимание `declarations`/`imports`/`exports`/`providers` необходимо для навигации по подавляющему большинству существующих приложений Angular и для понимания ленивой загрузки.

Хотя новый код тяготеет к автономным компонентам, знание NgModules остается необходимым для практической работы с Angular.

Анатомия NgModule

Четыре ключевых массива

Корневой модуль

Функциональные модули и организация

Переход к автономным

Почему это важно

Похожие вопросы