Creating Custom Library with Angular

While working in enterprise level projects we create a lot of common code which reduces considerable amount of extra lines. There are multiple ways to create it i.e. common projects, utilities, libraries etc.

For Angular project we can create these as Library. When I came across Angular library I found many documents on it available, but somewhere I missed a step by step guide for custom library creation and publish.

This blog is my attempt to put it all together.

Creating Library

Overview

Many times we have to solve the same problem at multiple places/projects like having a unified user interface, making data entries, or showing data in tabular format for which we write common implementations.

An Angular library is an Angular project that differs from an application in that it cannot run on its own. A library must be imported and used in an application.

So if we have a feature developed for reuse, we can create them as Libraries in Angular.

4 characteristics of an Angular library

1. It must have an Entry point
2. It should not contain application specific business logic
3. It should have Single responsibility
4. It should be Specifically for Angular projects

Creating a custom library

Steps:

1. Creating library skeleton in a new workspace
2. Updating custom code in Library
3. using the Library locally without publish
4. Publishing the library to public npm and using it
5. Publishing the library to custom NPM locations

Creating library skeleton in new workspace

Use Angular CLI to create using below commands:

ng new company-workspace --no-create-application
cd company-workspace
ng generate library ankush-lib

Library Skeleton

Once the skeleton is ready please check if the workspace file to validate if it is changed to type library

"projects": {
  …
  "ankush-lib": {
    "root": "projects/ankush-lib",
    "sourceRoot": "projects/ankush-lib/src",
    "projectType": "library",
    "prefix": "lib",
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:ng-packagr",
        …

Note: Please be very careful for choosing name for the library. Also make sure the library is always build with AOT compiler.

To make library code reusable we must define a public API in public-api.ts for it. This “user layer” defines what is available to consumers of your library. A user of the library should be able to access public functionality (such as NgModules, service providers and general utility functions) through a single import path. Anything exported from this file is made public when the library is imported into an application. Use an NgModule to expose services and components.

Build and test the library using below command:

ng build ankush-lib --configuration development
ng test ankush-lib

Updating custom library code in the library:

We can add code as per the requirement like any other component in the library.

Note: Any dependencies added for the library should be placed under peerDependencies in package.json

using the Library locally without publish

Once the build is complete for the library. We can take the path of library from dist folder and install it in dependent project using following command.

 npm i "C:\..\..\company-workspace\dist\ankush-lib"

Publishing the library to public npm and using it

To publish in global npm we need to use below command:

ng build ankush-lib
cd dist/ankush-lib
npm publish

Publishing the library to custom NPM locations

Many times we don’t want to publish our library to global npm and keep it private to a set of project. To achieve this we need to first setup the location of NPM in package.json of the library

{
 "name": "@company/ankush-lib",
 "version": "0.0.1",
 "peerDependencies": {
 "@angular/common": "^15.2.9",
 "@angular/core": "^15.2.9",
 "@angular/cdk": "^15.1.2",
 "@types/hammerjs": "^2.0.41",
 "@types/quill": "^1.3.10",
 "@types/webpack-env": "^1.18.0",
 "hammerjs": "^2.0.8",
 "primeicons": "^6.0.1",
 "primeng": "^15.1.0",
 "quill": "^1.3.7",
 "resize-observer-polyfill": "^1.5.1",
 "tslib": "^2.3.0"
 },
 "dependencies": {},
 "sideEffects": false,
 "publishConfig":{"registry":"https://artifactory.company.com/artifactory/api/npm/company-common/"}
}

once the package.json is updated we can use following command to publish:

ng build ankush-lib
cd dist/ankush-lib
npm publish

To use this in our dependent project.

First we need to add the registry in .npmrc file

registry=https://registry.npmjs.org/
strict-ssl=false
@company:registry=https://artifactory.company.com/artifactory/api/npm/company-common/

then we can install the library using below command:

npm i @company/ankush-lib<@version>

Conclusion:

Publishing a developed feature as library for reusable code is an architectural decision. It is comparable to deciding whether a feature is a component or a service, or deciding on the scope of a component. Please choose wisely. This blog takes reference from angular.io for contents.

If you liked this article, please 👏 below, so that other people can find it! 😊

Happy Coding!!