NgModules

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

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

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

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

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

Declarations

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

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

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

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

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 обнаружит какие-либо компоненты, директивы или pipe'ы, объявленные более чем в одном NgModule, он сообщит об ошибке.

Любые компоненты, директивы или pipe'ы должны быть явно помечены как standalone: false, чтобы их можно было объявить в NgModule.

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

imports

Компоненты, объявленные в NgModule, могут зависеть от других компонентов, директив и pipe'ов. Добавьте эти зависимости в свойство 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-компоненты, директивы и pipe'ы.

exports

NgModule может экспортировать свои объявленные компоненты, директивы и pipe'ы так, чтобы они были доступны другим компонентам и 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 также может экспортировать любые другие компоненты, директивы, pipe'ы и 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-компонента, директивы или pipe'а, который импортирует этот 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» — это соглашение, указывающее на то, что эти провайдеры предназначены для добавления исключительно в корень (root) вашего приложения во время начальной загрузки (bootstrap).

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

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

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

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

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

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

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

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

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

platformBrowser().bootstrapModule(MyApplicationModule);

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

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