Sébastien Lucas / Dev wiki
  • Blog Wiki
  • Story book
  • Developers comics
  • Angular
    • Angular CLI + Angular.json
    • ngTemplateOutlet
    • Angular Schematic
    • Interceptor
    • Micro frontend + Mono repo
    • Build a library module
    • Error handling
    • Virtual and infinite scroll
    • Angular i18n
    • Debug Angular
    • Angular LifeCycle Hook
    • Nested forms in Angular
    • Angular Recipes
    • Master component in Angular
    • Perfomance optimization
    • Service Workers + PWA
    • Mobile
    • Electron app / Desktop app
    • Unit test & Angular
      • Unit test recipes (Jasmine / Karma / Angular)
      • Testing services with httpMock
    • Communication between components
    • Angular snippet library
    • Release and version management
    • Angular tutorial selection
    • UI components libraries
    • Angular libraries
    • Angular Tutorials
    • NGRX
      • Angular NGRX / Tips and code examples
      • Angular new Redux (alternative to ngrx)
      • NGRX unit test
      • Angular ngrx / Basics
    • Angular 2/Angular 1 differences
  • Graphql
  • Three.js
  • Ag grid
  • Open source BIM and 3D
  • Javascript
    • Null vs undefined
    • Html API
    • Await API
    • Debug memory leaks
    • Offline and PWA
    • Javascript tutorials
    • Javascript recipes
    • Bluebird missing docs
    • Alternative to lodash with ES6
    • ES6 syntax the best parts
    • Vanilla JS
  • RXJS
    • Docs
    • Recipes
    • Mock API and sandbox
    • Observables rxjs recipes
    • Combination operators
  • NODE.js
    • Environment variables
    • Fix CORS
    • Pagination requests in API
    • API tests
    • Node.js security
    • Learn node.js
    • Best libraries for node.js
    • Mongoose recipe
    • Debug node.js
  • Gatsby / React
    • Hooks
    • React concepts
    • Gatsby internationalisation
  • Ghost blog
  • Services for developers
    • SaaS images services
    • Airtable API examples
  • MISC
    • JIRA debugging
    • Wordpress plugins
    • Interview Sébastien Lucas
    • English expression
    • True recipes
    • Science podcast
  • AI
    • Machine learning open source
    • Tensor flow
    • Machine learning
    • Code examples
    • Courses and tutorials
    • Datasets
    • The Future of AI
    • Learn algo and data structures
  • Typescript
    • Generic types
    • Typescript recipes
    • Advanced types
      • Conditional types
      • Type guards
    • d.ts files
  • Docker
    • Starting with docker
    • Dockerise simple node app
    • Docker by aymen el amri
  • Mongodb
    • Pattern and data modeling
  • Devops
    • Heroku
    • Scaleway
    • Github template
    • Gitlab CI
    • http2
    • nginx
    • zsh
    • CI Continuous integration
    • DNS
    • Devops resources
    • Gcloud useful commands
    • Authenticate Gcloud
    • Documentation generators
    • Firebase database
  • Developers ressources
    • Online platform coding
      • Online courses
      • Coding games
      • Coding test platforms
      • Links to check
    • Good developers blogs
    • Nice open source project / github
  • Tooling
    • The chrome urls
    • Linux Mac tips
    • Webstorm configuration
    • Develop in Windows
    • Mac debug hardware
    • Mac Setup for a developer
    • Chrome extension
    • Develop toolbox
  • HTML / CSS
    • Tailwind
    • Css grid
    • ☘️Nice styles & generators
    • Favicon
    • Flexbox grid
    • Flexbox layout
    • PUG templates tips
    • Html and css references
    • Css snippets
    • SASS-CSS libraries
    • New things in scss
    • SASS best practices
    • Style lint
  • Tests
    • Cypress
      • Learn cypress and more tests
      • Cypress commands
      • Cypress plugins
      • Page object && app actions
      • Flaky tests
    • Mobile test
    • BDD + Cucumber
    • Puppeteer
    • Type of tests + Ressources
    • Jasmine test
    • Mock, fake, stub in unit tests
    • E2e tests with protactor
    • Mocha
  • REVIT & AEC tools
  • Git
    • Git commits
    • Git tips
    • Git hooks
    • Set up a mono repo
  • Design Pattern
    • Functional Programming
  • Job board / Remote jobs
  • SVG
  • JSON
  • Github
    • Forking a github repo
  • NPM
    • Private NPM packages
    • Publish to NPM with np
  • Yarn
    • Yarn evolution / 2, 3...
    • Yarn Linking
Powered by GitBook
On this page
  • Type of library
  • Global explanation of how to set up a lib for Angular
  • Theming
  • Make library configurable
  • Module resolution and library
  • Get the assets of the library in dist folder
  • Publish the npm package
  • Workspace (Angular CLI or NX) + Lazy loading and routing

Was this helpful?

  1. Angular

Build a library module

PreviousMicro frontend + Mono repoNextError handling

Last updated 4 years ago

Was this helpful?

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

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

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

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

Or use npm pack in dist/my-lib folder and npm install from this npm pack

https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url
https://docs.npmjs.com/cli-commands/pack.html
NPM
article
Angular
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 Angular App & its Libraries.Medium
components/src/material at master · angular/componentsGitHub
Angular Material inspirations
How to create themes for your Angular 7 apps using CSS VariablesfreeCodeCamp.org
Logo
Everything you need to know about CSS VariablesfreeCodeCamp.org
Logo
The ultimate guide to set up your Angular library projectMedium
useful dev: Angular: Creating configurable libraries with angular cli
Logo
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 | DigitalOcean
GitHub - verdaccio/verdaccio: 📦🔐 A lightweight Node.js private proxy registryGitHub
Open source private npm proxy
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: Smart, Fast and Extensible Build SystemNx
Why And How To Lazy Load Angular LibrariesMedium
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo