Angular 将模块A导入模块B,但A已导入模块B

Angular 将模块A导入模块B,但A已导入模块B,angular,typescript,angular8,Angular,Typescript,Angular8,我有两个模块用户和产品。用户模块已导入产品模块以使用ProductListComponent。现在我想从产品模块中的用户模块导入/使用UserListComponent。但在产品模块中导入用户模块时,会抛出循环依赖错误。是否有一种方法可以使用其他模块中的每个模块,以便我的逻辑始终保留在其相应的模块中,但我可以重用其功能 我想有一个公共/共享模块,导入其中的所有其他模块,然后由所有其他模块导入该共享模块,因此这将使我的所有模块相互可用。但是这样做会抛出一个循环依赖错误,这确实是一个有效的错误 产品

我有两个模块用户和产品。用户模块已导入产品模块以使用ProductListComponent。现在我想从产品模块中的用户模块导入/使用UserListComponent。但在产品模块中导入用户模块时,会抛出循环依赖错误。是否有一种方法可以使用其他模块中的每个模块,以便我的逻辑始终保留在其相应的模块中,但我可以重用其功能

我想有一个公共/共享模块,导入其中的所有其他模块,然后由所有其他模块导入该共享模块,因此这将使我的所有模块相互可用。但是这样做会抛出一个循环依赖错误,这确实是一个有效的错误

产品模块

@NgModule({
声明:[ProductListComponent],
进口:[
公共模块,
ProductRoutingModule,
],导出:[ProductListComponent]
})
导出类ProductModule{}
用户模块

@NgModule({
声明:[UserListComponent],
进口:[
公共模块,
用户路由模块,
产品模块
],出口:[]
})
导出类UserModule{}
我在共享模块上尝试了什么,它看起来像

@NgModule({
声明:[],
进口:[
公共模块,
用户模块,
产品模块
],出口:[]
})
导出类SharedModule{}
产品模块

@NgModule({
声明:[ProductListComponent],
进口:[
公共模块,
ProductRoutingModule,
共享模块
],导出:[ProductListComponent]
})
导出类ProductModule{}
用户模块

@NgModule({
声明:[UserListComponent],
进口:[
公共模块,
用户路由模块,
共享模块
],出口:[]
})
导出类UserModule{}

请帮助我在应用程序中的所有其他模块之间共享所有模块,以避免代码重复或使应用程序设计独立。

共享模块导入应用程序模块文件中

Ahmad,建议/要求导入共享模块中的每个模块。共享模块用于保存许多模块所需的组件、指令等,如页眉(导航栏)、页脚、侧边栏等

    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
在您的情况下,理想情况下,如果不同组件(可重用性)需要相同的功能,您应该创建一个公共组件/指令,该组件/指令可以保存在共享模块中,然后共享模块可以导入到FeatureModule(您的情况下的用户/产品)

  • 如果功能不常见,则仅导出特定功能 组件(ProductListComponent)并导入该组件的 所需模块(UserModule)中的模块(ProductModule),反之亦然 (ProductModule中的UserListComponent)

如果在每个模块中导入每个模块,那么使用Angular有什么用。而且,优化将受到严重影响

嗨,艾哈迈德,在将来,你可以使用3个单引号:```,使用markdown=)格式化代码块)尝试只对单引号使用单引号,内联代码。对于在应用程序初始化时使用所有模块,请在根/应用程序模块中导入模块,这一点不推荐,但会解决您的问题。为了优化,请参考我的回答最初我只使用产品列表,所以正如您所说,我在导出产品列表组件时在UserModule中导入了ProductModule,但后来我得到了一个要求要在产品中使用UserList,但现在无法在ProductModule中导入UserModule,将用户列表和产品列表放在公共共享模块中会删除从其中列出相应模块的功能,并使我依赖于共享模块,就好像我想使用产品模块的ProductList还具有其他组件一样,我还必须包括SharedModules,在这种情况下,它会在检测到的循环依赖项中抛出警告:src/app/user/user.module.ts->src/app/product/product.module.ts->src/app/user/user.module.tsimport根模块中的模块,而不是在两个模块中循环导入。将抛出循环警告,因为您正在根模块中导入用户模块在用户模块中已导入产品模块时的产品模块。现在,在AppModule中添加导入后,UserList对ProductModule不可用,反之亦然。是否已在usermodule中导出userlistcomponent?