Какие типы функциональных модулей существуют в Angular?

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

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

1. Общие (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 {}
   

2. Ядро (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');
       }
     }
   }
   

3. Функциональный модуль (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 {}
   

4. Ленивая загрузка (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 позволяют эффективно управлять кодом приложения, упрощая его структуру и поддержку. Правильное использование общих, ядровых, функциональных и лениво загружаемых модулей поможет новичкам создать гибкое и масштабируемое приложение.