Какие модули импортируются в генерируемых CLI функциональных модулях?

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

Как создать функциональный модуль

Вы можете создать функциональный модуль, используя команду CLI:

ng generate module my-feature

Это создаст файл модуля my-feature.module.ts. Давайте посмотрим на него:

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

import { MyFeatureComponent } from './my-feature.component';

@NgModule({
  declarations: [MyFeatureComponent],
  imports: [
    CommonModule
  ],
  exports: [MyFeatureComponent]
})
export class MyFeatureModule { }

Что здесь происходит

1. Импорт NgModule: Это основной декоратор для определения модуля в Angular. Он берет метаданные о модуле и делает его рабочим в Angular.
2. Импорт CommonModule: Этот модуль предоставляет основные директивы Angular, такие как ngIf и ngFor, которые необходимы для работы с шаблонами. Поскольку функциональные модули часто содержат пользовательские компоненты, импорт CommonModule является обязательным для использования этих директив.
3. Декларация компонентов: В данном случае мы объявляем MyFeatureComponent. Это означает, что этот компонент связан с функциональным модулем и может быть использован в его шаблонах.
4. Экспорт компонентов: Мы экспортируем MyFeatureComponent, чтобы другие модули могли использовать его. Это полезно, если вы хотите, чтобы компоненты вашего функционального модуля были доступны в других частях приложения.

Дополнительные импорты

В зависимости от вашей функциональности, вы можете также импортировать другие модули. Например:

• Если вы используете маршрутизацию в вашем модуле, вам нужно импортировать RouterModule:

  import { RouterModule } from '@angular/router';
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule.forChild(routes) // routes - это массив маршрутов вашего модуля
    ],
  })
  export class MyFeatureModule { }
  

• Если у вас есть HTTP-запросы, вы можете импортировать HttpClientModule:

  import { HttpClientModule } from '@angular/common/http';
  
  @NgModule({
    imports: [
      CommonModule,
      HttpClientModule
    ],
  })
  export class MyFeatureModule { }
  

Заключение

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