Модули Angular для организации кода и ленивой загрузки

Модули — один из ключевых инструментов Angular для построения масштабируемых и поддерживаемых приложений. В этой статье мы подробно рассмотрим:

• что такое модули в Angular;
• зачем они нужны;
• как их использовать для структурирования кода;
• как реализовать «ленивую» загрузку модулей;
• и чем отличаются Feature, Core и Shared модули.

Если вы только начинаете изучать Angular или хотите углубить свои знания, эта статья поможет вам лучше понять, как правильно организовать архитектуру Angular-приложения.

Что такое модули Angular?

В Angular модуль — это контейнер для логически связанного блока кода, посвящённого определённой области приложения, рабочему процессу или набору возможностей. Он используется для группировки связанных компонентов, сервисов, директив и пайпов, что делает код более удобным для поддержки.

Модули определяются с помощью декоратора @NgModule.

Базовая структура модуля Angular

import { NgModule } from '@angular/core';  
import { CommonModule } from '@angular/common';  
import { SomeComponent } from './some.component';  
import { SomeService } from './some.service';  

@NgModule({  
  declarations: [SomeComponent],  
  imports: [CommonModule],  
  providers: [SomeService],  
  exports: [SomeComponent],  
})  
export class SomeModule {}

Типы модулей Angular

Feature-модули

Назначение: используются для организации приложения по конкретным функциям или областям. Каждый такой модуль обычно соответствует определённой функциональности в вашем приложении.

Характеристики:

• Сфокусированы на конкретной функции или части приложения.
• Могут быть загружены лениво для улучшения производительности.
• Поддерживают модульность и масштабируемость приложения.

Пример:

@NgModule({  
  declarations: [UserListComponent, UserDetailComponent],  
  imports: [CommonModule, UserRoutingModule],  
  providers: [UserService],  
})  
export class UserModule {}

Core-модуль

Назначение: используется для предоставления синглтон-сервисов, которые должны быть инициализированы только один раз.

Характеристики:

• Импортируется только в корневой AppModule.
• Содержит синглтон-сервисы и иногда несколько глобальных компонентов.
• Предотвращает повторный импорт.

Пример:

@NgModule({  
  providers: [AuthService, LoggerService],  
  declarations: [HeaderComponent, FooterComponent],  
  exports: [HeaderComponent, FooterComponent],  
})  
export class CoreModule {  
  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {  
    if (parentModule) {  
      throw new Error('CoreModule должен импортироваться только в AppModule');  
    }  
  }  
}

Shared-модуль

Назначение: содержит общие компоненты, директивы и пайпы, которые используются в разных Feature-модулях.

Характеристики:

• Обычно не предоставляет сервисы.
• Используется для экспорта переиспользуемых UI-элементов.
• Импортируется в Feature-модули при необходимости.

Пример:

@NgModule({  
  declarations: [CommonComponent, HighlightDirective, DatePipe],  
  imports: [CommonModule],  
  exports: [CommonComponent, HighlightDirective, DatePipe, CommonModule],  
})  
export class SharedModule {}

Корневой модуль (AppModule)

Назначение: точка входа в приложение, где инициализируется AppComponent.

Характеристики:

• Загружает корневой компонент.
• Импортирует CoreModule и SharedModule.
• Может импортировать Feature-модули напрямую или лениво.

Пример:

@NgModule({  
  declarations: [AppComponent],  
  imports: [  
    BrowserModule,  
    AppRoutingModule,  
    CoreModule,  
    SharedModule,  
    UserModule  
  ],  
  bootstrap: [AppComponent],  
})  
export class AppModule {}

«Ленивая» загрузка модулей

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

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

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

Чем отличаются разные виды модулей

• Feature-модули: организованы по функциям, могут быть загружены лениво.
• Core-модуль: глобальные синглтон-сервисы и компоненты, импортируется один раз.
• Shared-модуль: переиспользуемые элементы без сервисов.

Лучшие практики

• Изолируйте Feature-модули.
• Размещайте синглтон-сервисы в Core-модуле.
• Храните общие элементы в Shared-модуле.

Понимание и правильное использование модулей Angular помогает создавать масштабируемые и удобные в сопровождении приложения.