Модули NgModule

NgModule — это класс, помеченный декоратором @NgModule. Этот декоратор принимает метаданные, которые указывают Angular, как компилировать шаблоны компонентов и настраивать внедрение зависимостей.

import {NgModule} from '@angular/core';

@NgModule({
  // Metadata goes here
})
export class CustomMenuModule {}

У NgModule есть две основные обязанности:

• Объявлять компоненты, директивы и каналы, принадлежащие NgModule
• Добавлять провайдеры в инжектор для компонентов, директив и каналов, которые импортируют NgModule

Объявления

Свойство declarations метаданных @NgModule объявляет компоненты, директивы и каналы, принадлежащие NgModule.

@NgModule({
  /* ... */
  // CustomMenu and CustomMenuItem are components.
  declarations: [CustomMenu, CustomMenuItem],
})
export class CustomMenuModule {}

В примере выше компоненты CustomMenu и CustomMenuItem принадлежат CustomMenuModule.

Свойство declarations также принимает массивы компонентов, директив и каналов. В свою очередь, эти массивы также могут содержать другие массивы.

const MENU_COMPONENTS = [CustomMenu, CustomMenuItem];
const WIDGETS = [MENU_COMPONENTS, CustomSlider];

@NgModule({
  /* ... */
  // This NgModule declares all of CustomMenu, CustomMenuItem,
  // CustomSlider, and CustomCheckbox.
  declarations: [WIDGETS, CustomCheckbox],
})
export class CustomMenuModule {}

Если Angular обнаружит, что какие-либо компоненты, директивы или каналы объявлены более чем в одном NgModule, он сообщит об ошибке.

Чтобы объявить компонент, директиву или канал в NgModule, их необходимо явно пометить как standalone: false.

@Component({
  // Mark this component as `standalone: false` so that it can be declared in an NgModule.
  standalone: false,
  /* ... */
})
export class CustomMenu {
  /* ... */
}

Импорт

Компоненты, объявленные в NgModule, могут зависеть от других компонентов, директив и каналов. Добавьте эти зависимости в свойство imports метаданных @NgModule.

@NgModule({
  /* ... */
  // CustomMenu and CustomMenuItem depend on the PopupTrigger and SelectorIndicator components.
  imports: [PopupTrigger, SelectionIndicator],
  declarations: [CustomMenu, CustomMenuItem],
})
export class CustomMenuModule {}

Массив imports принимает другие NgModule, а также standalone-компоненты, директивы и каналы.

Экспорт

NgModule может экспортировать объявленные в нём компоненты, директивы и каналы, чтобы они были доступны другим компонентам и NgModule.

@NgModule({
  imports: [PopupTrigger, SelectionIndicator],
  declarations: [CustomMenu, CustomMenuItem],

  // Make CustomMenu and CustomMenuItem available to
  // components and NgModules that import CustomMenuModule.
  exports: [CustomMenu, CustomMenuItem],
})
export class CustomMenuModule {}

Однако свойство exports не ограничивается объявлениями. NgModule также может экспортировать любые другие компоненты, директивы, каналы и NgModule, которые он импортирует.

@NgModule({
  imports: [PopupTrigger, SelectionIndicator],
  declarations: [CustomMenu, CustomMenuItem],

  // Also make PopupTrigger available to any component or NgModule that imports CustomMenuModule.
  exports: [CustomMenu, CustomMenuItem, PopupTrigger],
})
export class CustomMenuModule {}

Провайдеры NgModule

NgModule может указывать providers для внедряемых зависимостей. Эти провайдеры доступны:

• любому standalone-компоненту, директиве или каналу, импортирующим NgModule, и
• declarations и providers любого другого NgModule, импортирующего этот NgModule.

@NgModule({
  imports: [PopupTrigger, SelectionIndicator],
  declarations: [CustomMenu, CustomMenuItem],

  // Provide the OverlayManager service
  providers: [OverlayManager],
  /* ... */
})
export class CustomMenuModule {}

@NgModule({
  imports: [CustomMenuModule],
  declarations: [UserProfile],
  providers: [UserDataClient],
})
export class UserProfileModule {}

В примере выше:

• CustomMenuModule предоставляет OverlayManager.
• Компоненты CustomMenu и CustomMenuItem могут внедрять OverlayManager, поскольку объявлены в CustomMenuModule.
• UserProfile может внедрять OverlayManager, поскольку его NgModule импортирует CustomMenuModule.
• UserDataClient может внедрять OverlayManager, поскольку его NgModule импортирует CustomMenuModule.

Шаблон forRoot и forChild

Некоторые NgModule определяют статический метод forRoot, который принимает конфигурацию и возвращает массив провайдеров. Название «forRoot» — это соглашение, указывающее, что эти провайдеры предназначены исключительно для добавления в корень приложения во время запуска.

Любые провайдеры, включённые таким образом, загружаются eagerly, увеличивая размер пакета JavaScript при первоначальной загрузке страницы.

bootstrapApplication(MyApplicationRoot, {
  providers: [CustomMenuModule.forRoot(/* some config */)],
});

Аналогично, некоторые NgModule могут определять статический метод forChild, указывающий, что провайдеры предназначены для добавления к компонентам в иерархии приложения.

@Component({
  /* ... */
  providers: [CustomMenuModule.forChild(/* some config */)],
})
export class UserProfile {
  /* ... */
}

Запуск приложения

Декоратор @NgModule принимает необязательный массив bootstrap, который может содержать один или несколько компонентов.

Для запуска приложения Angular можно использовать метод bootstrapModule из platformBrowser или platformServer. При запуске эта функция находит на странице элементы, CSS-селектор которых соответствует перечисленным компонентам, и отображает эти компоненты на странице.

import {platformBrowser} from '@angular/platform-browser';

@NgModule({
  bootstrap: [MyApplication],
})
export class MyApplicationModule {}

platformBrowser().bootstrapModule(MyApplicationModule);

Компоненты, перечисленные в bootstrap, автоматически включаются в объявления NgModule.

При запуске приложения из NgModule собранные providers этого модуля и все providers его imports загружаются eagerly и доступны для внедрения во всём приложении.