Creating an Angular library and publishing it to npm

Hello all, welcome to my blog once again. Here I am going to teach you how to create a simple angular library, publishing it to npm (node package manager) and consuming the same into an angular application.

Before proceeding we should know the purpose of creating a library and necessity of publishing it to npm.

By creating a library one can promote the idea of reusability and separate out the common functionalities. Instead of writing the same boiler plate code again and again one can just use the same library wherever required in an application. Until and unless the library is not published to npm it won’t be available for wider use and couldn’t access the same across the globe.

Let’s start with creating a library. Here I am going to perform following tasks:

1. Creating an angular library.
2. Publishing library to the npm.
3. Consuming the same library in our angular application.

NOTE: Will be using Angular 14 version.

Creating an angular library:

Create an empty folder wherever you want let’s say angular-library and run ng new angular-workspace — — create-application=false command. By running this command an angular workspace will be created without creating an application.

Now open the same workspace in your preferred IDE, here I am using VSC. After the workspace is created below files and folders will be getting generated.

Inside your angular-workspace run ng generate library <your_library_name> command to generate a library. In my case I’ll be running ng generate library welcome-message-lib command to generate a simple library which will display a welcome message to the user.

Library created successfully

After library created successfully a projects folder will be added in your workspace.

Library is generated within projects folder

Now let’s look into few files generated in library.

package.json

Here in package.json file, name refers to the actual name of library, it can be edited as per our convenience. version refers to the incremental changes in the library. For every change in library it needs to be updated to have track of different changes. In peerDependencies one can add other dependencies (if required) in the library.

public.api.ts

In public.api.ts file, one need to export every component(s), directive(s), pipe(s), service(s) and module(s) that needs to be available in consumer application.

lib folder

In lib folder, by default a component, a service and a module is generated. One can either edit it or add any number of component(s), directive(s), pipe(s), service(s) and module(s) according to requirement. Let’s focus on this default generated component as of now. As you can see in template a welcome message is already written.

Now to use and publish this library we need to build it first. Run ng build command to build the library.

Library build successful

After running the build successfully a dist folder will be generated. Now our library is ready to publish to npm.

Publishing library to the npm:

1. To publish it to npm first move inside dist > <library-name>.
2. Register an account on npm. To register to npm either you can do it directly by visiting npm official site and creating an account or run npm addUser command. If you have already created your account using npm official website then you just need to run npm login command and provide the credentials. Or if you don’t have an account you can directly create it by running npm addUser command and provide the details asked in terminal.
3. Once logged-in you can run npm publish command. It will publish your library into npm. You can check the same by logging into npm official site. All published libraries will be shown under package section.

Consuming the same library in our angular application:

Since our library is published to npm we can install the same in any angular application. To test it out let’s create an application let’s say test-app by running ng new test-app command in separate folder.

After creating an angular application run npm install welcome-message-lib@0.0.1 command, your library will be installed successfully. To use the library its module needs to be imported in the module of the application. Let’s import it in app.module.

test-app app.module.ts

To use the library in the application let’s add library’s component selector <lib-welcome-message-lib></lib-welcome-message-lib> inside app.component.html file of angular application.

Now run the application using ng serve.

Library component is used in test-app.

That’s all it takes to create a library and publish it to npm. Thanks for coming to this far.

Happy Learning! :)