Angular Library Modules export components, services and others from module

Question

I have created an Angular Library. In my Library I would it like it to be clean by having feature modules inside them:

Example:

Library
  NavigationModule
    NavigationSideBarComponent
    NavigationTopComponent
    Navigation Service
    etc

  GraphModule
    BarGraphComponent
    PieGraphComponent

My Navigation Module currently looks like this:

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

My Library Module currently looks like this:

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

Most tutorials I am finding is using a library with only components in them and nothing else such as modules. The tutorials I do find using modules in a library do not show how to export pieces.

Essentially I want to import this Library into any application and be able to call NavigationSidebarComponent or any other component from a module in the library or service.

I will keep looking into this on my end.

Answer 1

You have to export NavigationModule in the LibraryModule, not NavigationSidebarComponent

Answer 2

I think you don't need a top level "Library module" at all. Look at the source tree for @angular/material: I think they used to have a material.module and got rid of it, and now the root only has a completely empty index.ts. Each component has its own module, and modules like the one for MatAutocomplete import modules that they depend on (like MatOptionModule) and re-export them.

I've been converting a project of mine to a similar model, and doing research to figure out the current best practices for module structure. I believe Material converted from a "monolithic library" approach, where you were encouraged to import { MatAutocompleteModule } from "@angular/material" to one module per component (or group of related components), because this approach allows you to distribute the library as a single package, but still benefit from tree-shaking, so only the modules that are actually used will be included in your build.