Angular Library Modules从模块中导出组件,服务和其他组件

时间:2019-01-02 20:34:00

标签: angular import export angular-module angular-library

我创建了一个Angular库。在我的图书馆中,我希望通过在其中包含功能模块来使其干净:

示例:

Library
  NavigationModule
    NavigationSideBarComponent
    NavigationTopComponent
    Navigation Service
    etc

  GraphModule
    BarGraphComponent
    PieGraphComponent

我的导航模块当前如下所示:

@NgModule({
  declarations: [
    NavigationSidebarComponent
  ],
  imports: [
    CommonModule,
    MatSidenavModule
  ],
  exports: [
    NavigationSidebarComponent
  ]
})
export class NavigationModule { }

我的图书馆模块当前如下所示:

@NgModule({
  declarations: [LibraryComponent],
    imports: [
      NavigationModule
    ],
    exports: [
      LibraryComponent
      //NavigationSidebarComponent  <-- Did not work
    ]
 })
 export class LibraryModule { }

我发现的大多数教程都使用一个仅包含组件而没有其他组件(例如模块)的库。我发现在库中使用模块的教程没有显示如何导出片段。

基本上,我想将此库导入任何应用程序,并能够从库或服务中的模块调用NavigationSidebarComponent或任何其他组件。

我会继续研究这个问题。

2 个答案:

答案 0 :(得分:3)

您必须在NavigationModule中导出LibraryModule,而不是NavigationSidebarComponent

答案 1 :(得分:1)

我认为您根本不需要顶层的“库模块”。看一下the source tree for @angular/material:我认为他们曾经有一个material.module并摆脱了它,现在根目录只有一个完全空的index.ts。每个组件都有自己的模块,像the one for MatAutocomplete这样的模块会导入它们依赖的模块(例如MatOptionModule)并重新导出。

我一直在将我的项目转换为类似的模型,并进行研究以找出当前模块结构的最佳实践。我认为Material是从“整体库”方法转换而来的,鼓励您将import { MatAutocompleteModule } from "@angular/material"转换为每个组件(或一组相关组件)一个模块,因为这种方法允许您将库作为一个包分发。仍然受益于摇树,因此只有实际使用的模块才会包含在您的构建中。