Angular：从延迟加载模块导出组件

Question

1. AppModule：

     

     
   • 将ShellModule作为延迟加载
     

2. ShellModule：

     

     
   • 导入SharableModule      
       
     • 使用SharableComponent
       
     
   • 将FooModule作为延迟加载
     

SharableModule：

  

  
• 导出SharableComponent
  
• 提供SharableService
  

1. FooModule：

     

     
   • 路由FooComponent或BarComponent
     

2. FooComponent，BarComponent

     

     
   • 使用ShareableComponent
     

使用延迟加载无效SharableModule.exports，因此无法在SharableComponent中使用FooModule

  

是吗？

我将SharableModule的组件列表添加到FooModule然后正常工作。

但发生错误，因为在2个模块（ShellModule，FooModule）上声明了。

但ShellModule所需的组件SharableModule功能如FooModule

  

有什么正确的方法吗？

Answer 1

docs全面解决了这个问题。

通常，您应该 shared.module ，您可以在其中导入/导出所有可共享组件/指令，其他模块。它将在您想要使用它的任何延迟加载模块中导入。

对于services，通常它们应该是单个（单个实例）供您的整个应用程序使用。因此，它们应该分组在所谓的 core.module 中，此模块将导入您的root.module（又名app.module`）。

任何功能模块都应该是延迟加载模块。

项目结构是这样的：

+--app
    |
    +--core.module/
    |   |
    |   +--(import your sevices here...)
    |
    +--shared.module
    |   |
    |   +--(import/export all your components/directives/modules here)
    |
    +--any-lazy-loading.module
    |   |
    |   +--(import shared-module here)
    |
    app.module
        |
        +--(import core.module here)

Answer 2

不要使用SharableModule来提供SharableService，因为导入服务的每个延迟加载的模块将以不同的服务实例结束。如果您需要将所有这些服务用作单例，则将它们添加到核心模块。您还可以创建单独的core-service.module。使用可共享模块只共享组件或指令。

你可以这样做

core-components.module.ts[ Add core components]
core-services.module.ts[ Add all shared services]
shared.module.ts [ this module exports all shared component and modules]

在shell.module.ts中导入SharedModule，即shared.module 在foo.module中导入SharedModule，即shared.module 类似地，您可以添加尽可能多的模块[延迟加载或非延迟加载]，只使用作为公共模块导入的SharedModule。

这将阻止任何循环依赖，并允许您跨应用程序模块共享公共组件。