Стоит ли добавлять модули в Imports в SharedModule - Angular?

Question

Это мой SharedModule

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { IconModule } from "@my-app/components/icon/icon.module";
import { RequiredActionDirective } from "@my-app/directives/required-action.directive";

@NgModule({
    imports: [
        CommonModule,
        IconModule
    ],
    declarations: [
        RequiredActionDirective
    ],
    exports: [
        CommonModule,
        IconModule,
        FormsModule,
        ReactiveFormsModule,
        RequiredActionDirective
    ]
})
export class SharedModule { }

Обратите внимание, что я добавил в Imports только CommonModule и IconModule. Я сделал это, потому что я использую эти модули в моем RequiredActionDirective. Но Exports имеет больше модулей, потому что будет использоваться другими модулями, которые будут импортировать SharedModule.

Вопрос: правильно ли я думаю, что мне не нужно добавлять модули в Imports, если я не хочу использовать их непосредственно в SharedModule? Или в будущем могут возникнуть проблемы, о которых я сейчас не знаю, потому что теперь все работает правильно?

Answer 1

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

Как только модуль реэкспортирует модуль родительский модуль, импортирующий его, не может переопределить этот импорт. Так что это может быть проблемой в некоторых крайних случаях.

Например;

NgModule({
     imports: [HttpClientModule],
     provide: { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true },
     exports: [HttpClientModule]
})
export class SharedModule {}

Теперь модуль AppModule не может предоставить другой перехватчик.

NgModule({
     imports: [SharedModule],
     provide: { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true }
     // ^^ interceptor is ignored
})
export class AppModule {}

Причина в том, что что HttpClientModule становится объявленным в дереве поставщиков на уровне SharedModule и разрешает все HTTP_INTERCEPTORS с этой точки вниз .

Требуется, чтобы AppModule импортировал сначала HttpClientModule, а затем SharedModule.

NgModule({
     imports: [HttpClientModule, SharedModule],
     provide: { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true }
})
export class AppModule {}

Теперь HttpClientModule объявлен на уровне AppModule и разрешает всех провайдеров вниз , включая SharedModule. Порядок в массиве imports: [] не важен.