Импортировать модуль A в модуль B, но A уже импортировал модуль B угловой

Question

У меня есть два модуля Пользователь и продукт . Пользовательский модуль уже импортировал модуль продукта, чтобы использовать ProductListComponent. Теперь я хочу импортировать / использовать UserListComponent из пользовательского модуля в модуле продукта. Но при импорте пользовательского модуля в модуль продукта выдается ошибка циклическая зависимость . Есть ли способ использовать каждый модуль в другом модуле, чтобы моя логика всегда оставалась в соответствующем модуле, но я мог повторно использовать его функции?

Я думал о том, чтобы иметь общий / Общий модуль, который импортирует все остальные модули в нем, и этот Общий модуль затем импортируется всеми другими модулями, так что все мои модули будут доступны друг другу. Но при этом возникает циклическая ошибка зависимости, которая действительно является допустимой ошибкой.

Модуль продукта

@NgModule({
  declarations: [ProductListComponent],
  imports: [
    CommonModule,
    ProductRoutingModule,
  ], exports: [ProductListComponent]
})
export class ProductModule { }

Пользовательский модуль

@NgModule({
  declarations: [UserListComponent],
  imports: [
    CommonModule,
    UserRoutingModule,
    ProductModule
  ], exports: []
})
export class UserModule { }

То, что я пытался собщий модуль, и он выглядит как

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    UserModule,
    ProductModule
  ], exports: []
})
export class SharedModule { }

Модуль продукта

@NgModule({
  declarations: [ProductListComponent],
  imports: [
    CommonModule,
    ProductRoutingModule,
    SharedModule
  ], exports: [ProductListComponent]
})
export class ProductModule { }

Пользовательский модуль

@NgModule({
  declarations: [UserListComponent],
  imports: [
    CommonModule,
    UserRoutingModule,
    SharedModule
  ], exports: []
})
export class UserModule { }

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

Answer 1

импорт SharedModule внутри файла модуля приложения.

Answer 2

Ахмад, никогда не предлагается / требуется для импорта каждого модуля в общий модуль. Общий модуль предназначен для хранения компонентов, директив и т. Д., Которые требуются для многих модулей, таких как Header (Navbar), нижний колонтитул, боковая панель и т. д.

В вашем случае в идеале вы должны создать общий компонент / директиву, если для различных компонентов требуется одна и та же функциональность (повторное использование), чтобы компонент / директива могли храниться в общем модуле, а затемSharedModule может быть импортирован в FeatureModule (пользователь / продукт в вашем случае).

• Если функциональность не распространена, экспортируйте только определенный компонент (ProductListComponent) и импортируйте модули этих компонентов (ProductModule) в необходимый модуль (UserModule)или наоборот (UserListComponent в ProductModule)

Если каждый модуль импортируется в каждый модуль, какой смысл использовать Angular.Moreover, оптимизация будет в значительной степени произведена!

Answer 3

    you need to register that shared module to app.module like this

    App Module



  @NgModule({
      declarations: [],
      imports: [
        SharedModule
      ], exports: []
    })
    export class AppModule { }

    And shared module should look like this


  @NgModule({
      declarations: [ProductListComponent,UserListComponent],
      imports: [
        CommonModule,
        UserModule,
        ProductModule
      ], exports: []
    })
    export class SharedModule { }

 Now you can able to use all the modules
 please don't import modules multiple times