What is the Angular library?

The Angular library is a collection of components, services, modules, etc. used to share across different angular projects. The angular library must be important and used in an angular application.

Why we use the Angular library?

Many times components, services, and directives, etc. could be applied to multiple angular projects. So we can use this code in a different application. This angular library can be used in your local work area and you can publish as npm packages to share with another angular project or with other angular applications across the globe.

Example of how to build and publish Angular library

Step 1:

With Angular CLI, it is easy to manage the angular library. To create a library, we have the simple command below:

It is the updated angular.json, package.json, and tsconfig.json files of our main angular application. Now, we will check that the library is working properly in our local angular project or not and if it works properly then you can publish it to npm.

Step 2:

Now open this angular app in solution explorer, you can see it has a new generated library my-library under the project folder.

In package.json and other files have their dependencies and version.

In the public-api.ts file, this is the entry point for our library project.

And already generated the ‘my-library’ component. Inside the my-library.component.ts file, it has a template in the component decorator.

Now we use the library.

To use this library anywhere first we need to build the library. You cannot use a library without building a disc folder. Write the below command in your terminal:

ng build

This command will automatically create a disc folder, the compiled library is stored. You can use this library in any angular application.

Step 3:

Now, in solution explorer open the app.module.ts file and import our library just like we import any other in-built library of angular.

Now, we can use our library component on our app component.

In app.component.html file we add below code:

Now you run your angular application using ng serve --open command in your terminal.

[output of the component]

Step 4:

Now we add more functionality to our library project.

We add one simple component to having counter functionality.

ng g c counterdemo --project my-library

The my-library.module.ts file automatically updated. But in this file, it has only declared counter demo component and if we want to use this counter demo component outside in any angular application, and we must have to add it to the exports array inside the module decorator.

And also do not forget to export it in to the public-api.ts file also.

In counterdemo.component.html, and we will have two buttons one for the increment the counter value and another one is for the decrement the counter value by clicking on it.

counetrdemo.component.html file

counetrdemo.component.ts file

Now, use the counterdemo component in our angular project. For this, we have to create the rebuild.

ng build my-library

app.component.html file

Now you can run your project.

Step 5:

Now we will publish the library to local npm. For this, first, we build to this library, and then we can publish it into the local node package manager registry so we can use this library to any angular project.

This will pack a file with the name my-library-0.0.1.tgz.

Our library is publishing has done now we can use this library in any angular application.

We use this library in another project using the below command:

npm install C:angularlibrarydistmy-librarymy-library-0.0.1.tgz