Angular Library and Publishing in npmjs Registry

Why create a library?

It’s not only fun, but also incredibly useful to know how to publish any library that can be distributed as a standalone artifact for others to use as well. In this article I will share my experience in publishing my first angular library to npmjs.

Those familiar with Java Ecosystems, especially Maven, Gradle, etc., will be able to easily connect the benefits of library repositories to Java or J2EE applications.

For example, if we use Maven, we can name the dependent artifacts and Maven will pull them from the Maven repository locally.

But what about the UI? Fortunately for the UI, we can also publish libraries.

When to create a library

A good competitor to a library is any standalone functionality that can be useful in multiple projects.
For the user interface, the following might be a good candidate for the library:

  • UI components like button, grid, etc.
  • Data processing components such as data filters, formatters, etc.
  • Angular services like notification service, cookie service etc.

Few important considerations

In this article I would like to cover core concepts of how to write a library in Angular and publish it in npmjs.

A few important considerations are:

  • Naming the library: Angular recommends adding the prefix ngx to the name.
  • Where to publish: npmjs is one of the most and in this article we use names to publish the library.
  • Whether the library is to be public or private: Public funds available to all, and secret funds, there are some restrictions on who can access the library. Kind of similar in concepts to the public vs. private git repo.

Creating Angular Library

Once we have decided on the naming and where to publish, we are ready to implement the library. The angular library code structure is slightly different from the angular project.

Steps to bootstrap the library implementation.

ng new ngx-json-schema-gen --no-create-application

cd ngx-json-schema-gen

ng generate library ngx-json-schema-gen

The above command will generate the skeleton directory structure and also generate some files.

Folder lib contains the actual library implementations.

public-api.ts: Specifies all files exported from your library.

internal package.json (inside the src folder) contains the library’s dependencies and peer dependencies.

I will not go into detail about the implementation of the library; it depends on the functionality we want to build. In my case, I built an Angular Service to generate JSON schema from a JSON string. However, I have provided the public git repo in the reference section that contains the full implementation.

When the plugin is ready and time to publish.

Publish the Angular Library

Before we can publish to npmjs, we need an account; if we don’t have an account, we can create an account and then do the following.

Go to the project in the terminal and then do the following:

  1. Build the Angular library.
  2. Go to the Distribution folder.
  3. Publish the lib to the npm registry.
ng build ngx-json-schema-gen
cd dist/ngx-json-schema-gen
npm publish

The above steps will basically take the artifacts from the dist folder and upload them to npmjs. Now we can go to npmjs account and then publish the artifact. We may also release multiple versions of the library to the npm registry.

npmjs account and then publish the artifact.

Access to the library

The library can be accessed on the npmjs.org website to manage its tags, description, different versions of the library, etc.

The library can also be used in other projects by including the appropriate name and updating the package.json of the target project.

Or using npm install as follows:

npm i ngx-json-schema-gen

So that’s it, we have a library available to the world, cool, right?

William

Leave a Reply

Your email address will not be published. Required fields are marked *