В Angular функциональные модули (feature modules) — это важная часть архитектуры приложения, которые позволяют организовать код в логические блоки. Они помогают разделять различные функциональности приложения, упрощая его масштабирование и поддержку. Давайте разберем, какие существуют типы функциональных модулей и в чем их особенности.

Основные типы функциональных модулей

Общие (Shared Module): Общий модуль предназначен для предоставления компонентов, директив и пайпов, которые могут использоваться в различных частях приложения. Общие модули обычно не содержат сервисов или зависимостей, так как их основная задача — обеспечивать повторное использование.
Пример:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomComponent } from './custom.component';
import { CustomDirective } from './custom.directive';
import { CustomPipe } from './custom.pipe';

@NgModule({
  declarations: [CustomComponent, CustomDirective, CustomPipe],
  imports: [CommonModule],
  exports: [CustomComponent, CustomDirective, CustomPipe]
})
export class SharedModule {}

Ядро (Core Module): Ядро модуля предназначено для определения сервисов, которые должны быть единственными экземплярами в приложении ( Singleton services). Этот модуль чаще всего загружается в корне приложения и содержит критически важные зависимости.
Пример:

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppService } from './app.service';

@NgModule({
  imports: [HttpClientModule],
  providers: [AppService],
  exports: []
})
export class CoreModule {
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error('CoreModule должен быть загружен только в AppModule');
    }
  }
}

Функциональный модуль (Feature Module): Эти модули используются для реализации одной конкретной функции приложения. Например, в приложении электронной коммерции может быть модуль для управления продуктами, который включает компоненты, сервисы и маршрутизацию, связанные с этой функциональностью.
Пример:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProductsComponent } from './products.component';
import { ProductsRoutingModule } from './products-routing.module';

@NgModule({
  declarations: [ProductsComponent],
  imports: [CommonModule, ProductsRoutingModule]
})
export class ProductsModule {}

Ленивая загрузка (Lazy-loaded Module): Ленивая загрузка — это техника, позволяющая загружать модули только по мере необходимости. Это значительно ускоряет первоначальную загрузку приложения и улучшает производительность.
Пример настройки маршрутов с ленивой загрузкой:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'products',
    loadChildren: () =>
      import('./products/products.module').then((m) => m.ProductsModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Заключение

Функциональные модули в Angular позволяют эффективно управлять кодом приложения, упрощая его структуру и поддержку. Правильное использование общих, ядровых, функциональных и лениво загружаемых модулей поможет новичкам создать гибкое и масштабируемое приложение.

Предыдущий вопрос

Как выполнять обработку ошибок в наблюдаемых (observables)?

Следующий вопрос

Как узнать версию Angular CLI?

Содержание:

Основные типы функциональных модулей

Заключение

Редактировать