Angular Libraries-What,Why & How

May 9, 2020 Leave a comment

It’s been 3+ years I am working on Angular. I have used so many third-party libraries in different Angular projects. Can we create our very own library in the Angular framework?

The answer is Angular Library. Bingo… Yes, we can create our very own library 😊. Angular added ability to create libraries with angular CLI in Angular 6.

When I was digging into Angular libraries, I had three thoughts in my mind :

What are Angular Libraries?…

Why should we use Angular libraries?…

How can we use it?…

Let’s take on first thought what is Angular library?

An Angular library is an Angular project that differs from an app in that it cannot run on its own. A library must be imported and used in an app. Angular added ability to create libraries with angular CLI in Angular 6.

If you have developed functionality that is suitable for reuse, you can create your libraries. These libraries can be used locally in your workspace, or you can publish them as npm packages to share with other projects or other Angular developers.

Now move to the next thought Why should we use it?

It will enhance code reusability. We can import libraries in multiple Apps.

It will avoid various bad practices or architectural mistakes that can make it difficult to decouple and reuse code in the future.

We can decouple our code which is less prone to change (i.e. core services). It will prevent developers to pollute the core functionalities of the application.

Move to last thought how to use it?

In this article, we will cover steps to create a library and how to use it in multiple Apps :

Steps to create Angular Libraries:

  1. Create a library with below CLI commands:
ng new my-workspace --create-application=false 
cd my-workspace 
ng generate library common-utility-lib

2. Boilerplate code for the library is generated. You can add your components, Services, Pipes, etc. in the src folder:

3. Angular.json will get updated with projectType = “library”

4. To make library code reusable you must define a public API for it. This “user layer” defines what is available to consumers of your library. public_api.ts plays this role in your code. Anything exported from this file is public and ready to reuse in different Angular Apps.

5. Your library is ready to use. Build your library with ng-build command. 6. For demo purposes, we will create a service method and use it in multiple Apps.

     Common-utility-lib.service.ts

How to use

Use in multiple local projects:

I have created two test projects using the monorepo model.

  • test-library-first-app(command: ng generate application test-library-first-app)
app.component.ts
  • test-library-second-app(command: ng generate application test-library-second-app).
 app.component.ts

Publish library in NPM:

Use the Angular CLI and the npm package manager to build and publish your library as an npm package. If you have never published a package in npm before, you must create a user account. Use below commands to publish your library in npm registry:

ng build common-utility-lib –prod
cd dist/common-utility-lib 
npm adduser
npm publish      

For reference, I have published the library created here. You can install and access published library with below command :

Contributed By:

This article is contribute by Ajay Srivastava. He is having very good experience in multiple technologies & also a good mentor. For more information about him, please click here..

References :

  1. Official Angular docs(Angular.io).

Leave a Reply