Модули

Angular модуль - это класс с декоратором @NgModule(), который служит изолирующей логической объединяющей структурой для компонентов, директив, фильтров и сервисов. Все перечисленные сущности определяются и конфигурируются с помощью @NgModule().

Angular приложение имеет модульную архитектуру и состоит, по крайней мере, из одного главного, или корневого, модуля. Все остальные относятся к второстепенным.

Сама библиотека @angular также модульная:

BrowserModule;
CommonModule;
FormsModule;
ReactiveFormsModule;
HttpClientModule;
RouterModule и др.
Ключевая роль при создании Angular модуля у декоратора @NgModule(), принимающего конфигурационный объект со свойствами:

imports - массив, где указывается список импортируемых второстепенных модулей;
exports - массив компонентов, директив и фильтров, которыми пользуются другие модули, если они импортируют текущий;
declarations - массив компонентов, директив и фильтров;
entryComponents - массив создаваемых динамически компонентов;
bootstrap - массив, в котором указывается компонент для загрузки;
providers - массив сервисов.
По назначению модули можно классифицировать следующим образом:

корневой;
функциональный;
маршрутизации;
для поставки сервисов.
Корневой модуль - главный в приложении. Именно он загружается первым и импортирует в себя все второстепенные модули, которые могут импортировать в себя другие второстепенные модули.

Только корневой модуль может определять свойство bootstrap и импортировать BrowserModule.

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
//
],
bootstrap: [AppComponent],
})
export class AppModule {}
Функциональный Angular модуль реализует логически связанную совокупность компонентов, директив или фильтров (например, модули библиотеки @angular/material).

Практически всегда для модулей этого типа определяется свойство exports.

@NgModule({
//
exports: [
AccountsComponent,
CreditsComponent,
DepositsComponent,
CreditsFilterDirective,
],
//
})
export class AppModule {}
Модуль маршрутизации нужен для определения иерархии маршрутов.

Angular модуль для поставки сервисов создается с использованием статического метода forRoot().

CoreModule и SharedModule
CoreModule - общепринятое название для модуля, используемого исключительно для поставки сервисов. Он не содержит в себе компонентов, директив и фильтров.

core.module.ts

@NgModule({
imports: [],
declarations: [],
providers: [],
})
export class CoreModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: CoreModule,
providers: [
AuthService,
LoggerService,
SettingsService,
],
}
}
}
SharedModule - общепринятое название для Angular модуля, служащим единым хранилищем для компонентов, директив и фильтров, которыми пользуются другие модули.

shared.module.ts

@NgModule({
imports: [
CommonModule,
FormsModule,
ImageCropperModule,
ScrollbarModule,
SlickModule,
SlickModule.forRoot(),
],
exports: [
CommonModule,
ImageCropperModule,
ScrollbarModule,
SlickModule,
AppLangsComponent,
AppTabFilterComponent,
AppFileUploadComponent,
ComponentPreloaderDirective,
],
declarations: [
AppLangsComponent,
AppTabFilterComponent,
AppFileUploadComponent,
ComponentPreloaderDirective,
],
})
export class SharedModule {}
@NgModule({
imports: [
//
CoreModule.forRoot(),
SharedModule
]
})