Build a library module

Type of library

Angular libraries can come in different shapes and for different purposes!

  • utils — a collection of various utilities, usually in form of stateless services

  • component library — a collection of reusable simple (dumb) components with only plain API facilitated using mostly @Input and @Output decorators

  • drop in component — a more complex component with its own state handling / data fetching which can still communicate with the parent application using @Input and @Output (eg pass in configuration or let the parent know about the outcome of some operation…)

  • sub-application — the most complex library which could also run as a stand alone application if the need be. Such a library can come with multiple modules with their own routes, components and services… List taken from this article

Global explanation of how to set up a lib for Angular

Theming

Make library configurable

For short we need to use an injection token and a provider in the module definition of the lib and use forRoot in the consuming app.

Module resolution and library

  • How the modules of dist/library are available for all app without being a node module

Thanks to path additions of tsconfig.json added at the time of doing ng generate library my-lib

https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url

Get the assets of the library in dist folder

This issue is not more valid from angular 9

Publish the npm package

  • Use an open source free private npm package

pageNPM

Workspace (Angular CLI or NX) + Lazy loading and routing

Last updated