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

Angularangular.io

Official guide page

How to build a library for Angular apps?Medium

Angular 7 Series Part-2: Creating a Custom LibraryMedium

check list of steps to create a lib

Theming

Theming Angular App & its Libraries.Medium

components/src/material at main · angular/componentsGitHub

Angular Material inspirations

How to create themes for your Angular 7 apps using CSS VariablesfreeCodeCamp.org

Everything You Need to Know About CSS Variables [Full Handbook]freeCodeCamp.org

The ultimate guide to set up your Angular library projectMedium

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.

useful dev: Angular: Creating configurable libraries with angular cliwww.usefuldev.com

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

GitHub - linnenschmidt/build-ng-packagr: Angular Build Architect for ng-packagr with asset handlingGitHub

Assets support for Angular 7 LibraryMedium

How To Use Custom SVG Icons in Angular Material | DigitalOceanDigitalOcean

Publish the npm package

• Use an open source free private npm package

GitHub - verdaccio/verdaccio: A lightweight Node.js private proxy registryGitHub

Open source private npm proxy

• Or use npm pack in dist/my-lib folder and npm install from this npm pack https://docs.npmjs.com/cli-commands/pack.html

NPM

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

GitHub - angularlicious/lazy-load-library-micro-app: A simple Angular Workspace that demonstrates the capability of lazy-loading a library as a feature module (a.k.a. micro-app).GitHub

Lazy Load Angular Library (Micro-Applications)Medium

Nx and Angular VersionsNx

Why And How To Lazy Load Angular LibrariesMedium