Reading time: 7 minutes
Description
In this post I will demonstrate how to set up everything you need in order to be able to publish the npm package and use it as a js module in another application.
What is required
- Npm account
- Visual studio code
First thing first make sure you have a local environment and workspace for Angular app setup. If you got it then skip the next step.
1 step: Setup local environment and workspace for Angular app
Install Visual Studio Code on your machine. Please use the link below.
https://code.visualstudio.com/download
Then you need to install an appropriate Node.js version that is compatible with your version of Angular.
https://nodejs.org/en/download/
2 step: Create npm account if you haven’t got one
Go here https://www.npmjs.com/signup
TO NOTE: Make sure you confirm your account from your email box.
Or you might have errors when trying to login to npm through VS code.
3 step: Login to your npm account through VS code
Assuming you got VS terminal open
- type in > npm login
- follow on screen instructions
- to accept your input press Enter key
- when you are typing password it wont show it but it’s there….magic
*npm config file for user – .nprmc, can be found at this location C:\Users\YourName
make sure the registry is set to npm like so registry=https://registry.npmjs.org/
4 step: Create npm package
- navigate into the root folder using > cd folderDestintation e.g. cd C:\Users\dmitr\source\frontend
- create new directory by typing > mkdir name-of-your-package
- navigate into newly created directory using > cd name-of-your-package
- initiate the package with package.json by typing > npm init
- use this command to go to code > code .
5 step: Create Angular app
It is a straightforward task once your local environment and workspace is set up.
*workspace here I mean the area on your computer rather than angular workspace
- Open new window in VS code
- Go to menu option Terminal > New Terminal
- Optional: Install the latest Angular version globally with this command > npm install -g @angular/cli
- navigate into the root folder using > cd folderDestintation e.g. cd C:\Users\dmitr\source\frontend
- type in > ng new your-app-name
- go to the root folder where app was created by typing > cd your-app-name
- then by typing > code .
- new window should open with the app
*ng-new creates a new app that is default project for new ng workspace
*ng serve -o – opens the application in the browser. Prefix -o opens the application in the browser.
Ok we finished setting things up.
Next we need to add some code to our package.
In the package application add new file index.js, it’s going to be our entry point as we previously configured in package.json.
exports.printMsg = function () {
console.log("This is a message from the demo package");
}
The whole project should look like this.
We are ready to publish.
Since we logged-in in one of the previous steps we will go straight to publishing.
Unless you have a paid account type with npm we can only publish public packages. In other words a package that can be seen and used by everyone.
We will publish an unscoped public package.
Let’s go to npm and check whether our package is there.
Ok let’s get back to the Angular app and let’s use our newly published npm package.
We need to modify the main app component’s ts file. Then we install our npm package using > npm i your-package-name
You can find a complete command on your npm account on your package details page.
In order to consume our package module with Angular we need to use Node.js require function. We also need type definitions for the node. These should be installed once you run the ‘npm install’ command in the terminal. To be sure you can run > npm i @types/node
For these definitions to be found we need to reference them in tsconfig.app.json file. To note it’s tsconfig.app.json and not tsconfig.json.
Check how to do it for your Angular version. Mine is 11. To check angular version either run ‘ng –version’ or ‘npm list -global –depth 0’
Let’s run the Angular app and see if it uses our npm package.
In the terminal run ‘ng serve -o’ command. This should open the app in the browser. Let’s hit F12/open developer tools and check in the console for our package message.
Next thing is let’s update our npm package and re-publish it.
For this we need to change the version by using the ‘npm version 2.0.0’ command. Npm follows semantic versioning, more details here.
Let’s change the console.log message as well.
Then we need to use the command ‘npm publish’ again. You can check on your npm account if the package version was changed.
Next let’s update our package in the Angular app.
We can check if there are any outdated packages by using the ‘npm outdated‘ command in the terminal of our Angular app.
There are multiple but for now we keep the focus on our npm package.
To update we will use ‘npm i your-package-name@latest’ or ‘npm i your-package-name@1.0.0’ with a particular version.
Alternatively if you want to update all the outdated packages then use the ‘npm update’ command. If nothing gets updated then try ‘npm update -dd’ which will give you more details. Possibly you would need to adjust the maximum version in the package.json file.
Let’s run the Angular app again and see if it uses the latest version of our npm package.
Same as previously ‘ng serve -o’, F12/developer tools and check the Console for the message.
Conclusion
As you can see, creating the npm package is straightforward. Npm documentation is clear and concise.
It is very handy to have regularly used pieces of code placed into the package. You can reuse it anywhere you want. You can share it. Plus it is easy to locate it in case you need to modify it. Finally you are avoiding code duplication. Hence less code. It is especially valuable for front end apps.
Source code can be found here for npm package and here for Angular app.
Dmitri Galejev 