Ever wondered if you can create your own Angular packages and can download them in your project anytime? This can be very useful if you require any module every time you create an Angular application.
This approach is very effective as it gives us the flexibility to write once and use as many times as we want.
For an example, a helper module is a module that you need in almost all of your projects. You need to create the helper module every time you create a new application. So why not create a Helper Packer and publish it on your own NPM repo on a remote server. Then whenever in future you need that module, you don’t have to create it. Instead, you can call it from npm command -
npm install <your_package_name>
Isn’t it a cool way?
So, let us get started.
You can publish any directory that has a package.json file. Also, there are certain npm policies that you can find here. It’s good to check out the policies/guidelines before you continue.
Let us create a sample Angular application. I am using Visual Studio Code.
Create a demo folder & open it in Visual Studio Code
Open terminal. The shortcut keys can also do it (ctrl+`). Now, on the terminal, type the following.
“npm init”
It will initialize your package.json file.
After it, install the cli : “npm install @angular/cli”
Use “–g” if you want to install it globally.
I have created one for me above. You can also create an application with “ng new <App_Name>”
Mine is demoapp.
Once the application gets created, check if it has node modules downloaded. If not, now it’s time to download the dependencies through “npm install”. If you want to install it globally, you can use “-g”. Now, the npm will go through your package.json, will read all the dependencies required, and will download it in the node modules.
If you already have node modules installed, great. Now, it’s time to create a module. Let’s say “Helper Module”.
Command
“ng generate module helper”
You can check that a module has been created in src>app>helper and we have a file “helper.module.ts”. Now, you can define anything you need in every project so the next time, you do not have to, again and again, write it. Instead, we will just call the module and will use it in our projects. It is one of the most generic ways to save your time and efforts.
Assuming you have created your module, now it is time to publish your package to npm.js so you can use it anytime you need. However, before you continue, there are some of the points that need to be discussed.
- When we say we are going to publish the package, we need to assure that we have gone through all Npm guidelines, see the link I have shared above.
- The package that you will publish, will be publicly available until and unless you have a paid account. If you want it to be privately available, you can take a plan which hardly costs around $7/ month.
Before publishing, you need to have an account on npm.js. There are two ways to create either with a command or through the npm.js website. The link for creating an account is here.
Once created, you will have a username which you will need to provide while creating the account. We now have to add the user locally. Again, go to the terminal and execute the command: “npm adduser”
Note
Your email will be public.
Now, to check, use the command “npm whoami” ( It should give your username, remember to use “npm”, else it will show your local username or user signed in the name)
One more thing we need to change is in our package.json file, i.e., we need to define “private:false”, as we are publishing it publically.
Now, it’s time to finally publish.
Execute the command - “npm publish”.
Now, our package has been successfully published to NPM registry.
You can check it here.
You can download it through “npm i <Your_App_name>” or “npm install <Your_App_name>”. You can also check the dependencies, versions, and all other things here.
PandiyanPosted Sep 2, 2018, 1:48 AM
How to convert our angular code into npm modules format while publishing?