How to create and publish npm packages in Angular?

npm is an library store where you can find lot of useful libraries for your angular applications. It is known as Node Package Manager.

Node – It uses node.js where it is an server–side JavaScript environment which uses asynchronous event-driven model.

Package – Combined modules of code grouped into a component.

Manager – Managing the operations of the respective package such as install, unistall, update etc.

So if you want to install any package from npm, you can use the below command. The respective command will install the respective package into your angular application.

npm install Library_Package_Name

How to publish npm package?

Its not only you can make use of libraries in the respective npm, but the best part is you can also build an npm package and you can publish it in the respective package manager.

Step 1:

First you need to create an npm account. Use this link to signup to npm.

Step 2:

First we are going to create an package using the below command,

npm init

It will prompt you for some details such as name and version of the app, GitHub repository, test etc. If you know the details, please mention the respective information and if you are not sure just press enter and continue.

This will create an package.json file which is an important file to publish your package to npm.

package.json

{
  "name": "suhas_demoapp",
  "version": "2.0.0",
  "description": "sample application",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Step 3:

Next we are going to create an index.js file which has an functionality of finding the maximum number between the given two numbers.

index.js

function findMaxNumber(firstNumber, SecondNumber) {
   if(firstNumber > secondNumber){
       return firstNumber;
   }
   return secondNumber;
}
module.exports = findMaxNumber;

Once it is done, open command prompt as administrator and use the below command to sign in to npm.

npm login

Provide the respective details such as user name, password and mail id. Once you have logged in, you can verify using the command npm whoami to check whether it has been successfully logged in or not. Once you have logged in, use the respective command to publish your package to npm.

npm publish

Please make sure you have some unique name to your package and also your application name should not contain any upper case letters.

And that’s it we have successfully published our first version of our package. You will receive an confirmation mail to your mail id.

How to use this package in other applications?

If you want to use this library in any of your applications, you need to install it.

npm install suhas_demoapp

app.component.ts

const findMaxNumber= require('findMaxNumber');
console.log(findMaxNumber(5, 10));

By adding the above code to your component, we are importing the findMaxNumber function using require function and we are passing two numbers to find the maximum of it. So in the console the output will be 10.

But these npm package are mainly used for some repeated functionalities such as copy to clipboard and also for creating differenct layouts. You can explore more packages in npm which will be very interesting.

Final Steps

To make this as an proper package you have to,

• Publish your code in GitHub for proper versioning.
• You should create some tests for your respective package.
• The versioning of the packages should be properly done.
• It should be licensed to MIT.

So if you take care of these final steps, your package will reach out to many people and it will have some good downloads.

Conclusion

In this blog, we have seen about npm and we have created an small npm package and published it in npm. You see it’s very simple of publishing the packages but since there are lot of packages available for almost all the solutions, if you are gonna publish any package come up with good set of problem that solves by your package.

I think our Angular Series has come to and end. In our next blog we will see about Visual Studio vs Visual Studio Code.

Happy Coding!

Cheers! 🙂