Till this date, developers often encounter the need to create generic components or functionalities that can be used across multiple projects. Without a centralized repository, managing these can become cumbersome and inefficient. So, the solution lies in packaging these reusable components as npm (Node Package Manager) packages and publishing them to a centralized registry.
In this blog, you’ll see how to publish npm package of Angular library project into Azure Artifacts Registry and how to use it.
Why npm?
One of the most important advantages of a npm package is that you can create generic components for your reusable functionality and publish them to the registry. Therefore, you can use the same functionality in multiple projects simply by adding a npm package dependency and integrating it.
If you publish a npm package in the Azure Artifact registry, you gain access to the Azure ecosystem where you can manage everything in one place for your project’s SDLC lifecycle. Additionally, you can automate the task of publishing library versions via Azure pipelines, which I will cover in part 2 of this blog. Stay tuned for the read!
Before diving into the publishing section, let’s first cover some essential prerequisites and initial steps.
Prerequisites: The Stepping Stones
To begin, ensure you have the following installed on your system:
- Node.js
- Angular CLI
- Code Editor (preferably VS Code)
Apart from that, you must have basic knowledge about these:
- NPM package and Node Modules
- Azure Artifacts
- Basics of Angular
Once you’re armed with the above, you can get started to create the Angular library project.
To do so, you first need to create a regular Angular project following this command:
ng new grid-ui
Then inside the grid-ui angular library project, we will create the Angular library project by using command from grid-ui project root directory:
ng generate library grid-ui-lib
This will create project inside the project folder in the root directory, which will look like this:
Picture 1: Project Overview
Inside the library project, you can create reusable components, services, and models, which you can then export for use in other projects. Your entry point for the library project is public-api.ts file. In public-api.ts file, you can see all exported components, interfaces, services, etc. To learn more about Angular library projects, you can refer to the Angular official documentation of creating libraries.
For reference, you can look at my code on GitHub, where I’ve created the grid-ui-lib project and developed a reusable component named GridUiLibComponent, and interfaces (Column, GridConfig) which we will use in another project.
Here’s the GitHub repository link: https://github.com/OmkarMohite505/grid-ui.git.
Discover how Node.js, Java, and .NET can optimize your technology stack, drive efficiency, and align with your unique needs.
Now, let’s dive deeper and learn how to publish the Angular library as an NPM package in the Azure Artifacts Registry.
Publishing Your Angular Library to Azure Artifacts Registry
To publish your Angular library in the Azure Artifacts Registry, follow these steps:
1. First, you need to login to Visual Studio, the IDE and code editor designed for software developers and teams by Microsoft. If you don’t have credentials, go to Visual Studio, register and then login. (https://visualstudio.microsoft.com).
2. Go to your Visual Studio profile and create an organization if you’re doing this for the first time. Then, navigate to the newly created or existing organization in Azure DevOps. Finally, create a new project within Azure DevOps. This project will serve as the container for your development efforts, including the management of source code, pipelines, and other project-related activities.
Picture 2: Azure DevOps Board
3. Once you create the new project, you will be navigated to the Azure DevOps Board. From there, go to the Artifacts section in the left-side navigation bar. You’ll need to create a new feed if this is your first time. This feed will be where you publish various NPM packages. Additionally, you can publish NuGet, Maven, Gradle, Pip, and Twine packages as well.
When creating a new feed, you must select the visibility access to determine who can access your packages. You’ll see different visibility options to choose from.
Picture 3: Artifacts Board
After this step, you will be done with the basic setup to publish npm packages.
4. Post that, you need to click on Connect to feed, select npm, and then you will see the project setup popup. It must look like this:
Picture 4: Feed Details
Now, copy the registry URL, then create a file named .npmrc in the root directory of your library project.
5. Authenticate the .npmrc file via the following:
If you don’t have vsts-npm-auth package installed, first install it via this:
npm install -g vsts-npm-auth –registry https://registry.npmjs.com --always-auth false
Then, authenticate using this command:
vsts-npm-auth -config .npmrc
This will open an authentication popup.
Here, you need to authenticate using your Microsoft Visual Studio credentials, which you used to log in to the Visual Studio IDE and Code Editor for software developers and teams. If you have already authenticated the feed registry, the authentication popup will not appear again.
6. Before publishing the package, you need to verify your functionality locally. After that execute this command from your library project root directory:
npm publish
However, it will publish the Angular code in its original form, not as compiled code, which is not the correct way. To see the published package file, install our package in another project, navigate to the node_modules folder, locate our package name, and inspect it.
So, now to publish the compiled Library project as npm package, execute this command:
ng build grid-ui-lib
This will create the compiled build output of the library project.
Now, go to the dist folder then navigate to the project folder name grid-ui-lib. Inside this folder, copy your .npmrc file and again execute this:
vsts-npm-auth -config .npmrc
Finally, execute this command:
npm publish
Once done successfully, you will see the published package in the Azure DevOps Board.
Picture 5: Published feed from Artifacts board
Now, if you click on the package name, there you will see steps to use our published package.
If you have made any changes in code for any feature or bug fixes, you can publish the updated npm package by using the same steps (ng build grid-ui-lib and then npm publish). You must specify the version number in the package.json file of the library project.
Onwards to the final steps!
How to use the published package in the project?
To use the published package in the project, you need to follow these simple steps:
1. In any of your Angular projects, add an .npmrc file to the root folder of the project.
2. Add Registry URL of your feed which you will get after clicking on ‘Connect to Feed’ from Azure DevOps Artifact.
Picture 6: npmrc file registry URL
3. Then open the terminal from root folder and execute the following command:
npm install [email protected]
4. If there is angular version mismatch of your library project and consuming project and you can just add –force flag:
npm install [email protected] --force
5. Once the package gets installed, you will see an entry in package.json file with your provided name in the dependencies section. In my case, this was displayed:
"grid-ui-lib": "^0.0.3",
6. Then, you can import Components, Interfaces, and Services and use them in your consuming project.
Note: If you are using a module-based project in Angular 15 or earlier versions, first import GridUiLibComponent in the imports array of the module class. For standalone components, include it in the components’ imports array.
Here is my configuration data for GridUiLibComponent:
Picture 7: Controller Config file
This is my HTML template to use component selector:
Picture 8: HTML Template
After completing these steps, you will be able to see the output of the GridUiLibComponent:
Picture 9: Library UI output
Here, I have created a simple component and packaged it as a npm package. You can create components according to your business requirements and use them similarly. When adding dependencies to your library project’s package.json file, ensure that these dependencies are also listed in the consuming project’s package.json file.
Let’s say, if you use the Kendo Notification module in your library project and add its dependency as “@progress/kendo-angular-notification”: “^13.4.0” in the library’s package.json, the same dependency should be included in the consuming project’s package.json file.
Therefore, publishing a npm package in a private registry enhances its security. This ensures that only individuals within your scope or organization can access it. Furthermore, utilizing Azure’s comprehensive ecosystem for your SDLC lifecycle can manage everything, including npm packages, making the development journey more convenient and centralized.
Wish to revamp your business with the latest software engineering techniques? Reach out to us at Nitor Infotech.
