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.

Toehold

I have never built and published a library, but I've noticed that some UI vendors publish individual modules to npm separately. Here's an example of a 3rd party vendor's Dropdown components module. npmjs.com/package/@progress/kendo-angular-dropdowns – Sayce

Thanks Keenan, ya I am thinking maybe this is not possible. Only the ones that import the module have access to their components, etc. I was hoping to do it like this because then I could have one library with each module being a feature – Toehold

It is starting to look like I need to make a library for each which would be terrible to manage. Or put all components regardless of types like header, footer, tables, all in the library module. – Toehold

My main thought though is Angular supports it so I would assume it is dooable – Toehold

If you have a dependency of one module on another (using the BarGraphComponent in your NavigationTopComponent implementation for example), that might be okay. As long as the dependency is 1-way. – Sayce

Look at the dependencies that the @progress kendo grid has: telerik.com/kendo-angular-ui/components/grid/#toc-dependencies And actually, it looks like npm support peer dependencies, so forget my 1-way comment. – Sayce

So the navigation and graph are seperate modules. I want the appModule importing the library to be able to use both. I will take a look – Toehold

I could be wrong but I think there's is different. I think theirs is the kendo is using all these different modules for itself. What I am trying to do is have many different modules in a library and then import that library to an app and be able to call components and services for both modules – Toehold

Answer 1

You have to export NavigationModule in the LibraryModule, not NavigationSidebarComponent

Furthermore

Thanks the module approach I believe is best for a library. – Toehold

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.

Astrogate