Angular + npm - How to Publish an Angular Component to npm
In this post we'll go through the steps to create and publish an Angular component to the npm package registry.
Other versions available:
- React: React
Tutorial Contents
- Sign up to npm
- Install Node & npm
- Install the Angular CLI
- Create an Angular workspace
- Create an Angular library
- Remove unused files
- Update the Angular component
- Build your Angular component
- Login to npm
- Publish your Angular component to npm
Sign up to npm
The first thing you need to publish an Angular component to npm is an npm account, you can sign up here for free.
Install Node & npm
If you're ready to publish a package to npm you probably already have NodeJS and npm installed, but if not you can install them from https://nodejs.org/en/download/.
Install the Angular CLI
Install the Angular CLI globally with command npm i -g @angular/cli
The Angular CLI is the de facto command line tool used to develop, build and test Angular applications. For more info see https://cli.angular.io.
Create a new workspace for your Angular component project
Angular projects are developed within workspaces, so before creating a project you must create a workspace that it will belong to.
Create a new Angular workspace with the command ng new <workspace-name> --create-application=false
Then navigate into the workspace folder with the command cd <workspace-name>
The --create-application=false flag prevents a default Angular application project from being created, because you'll be creating a library project for your component.
The workspace name can be the same as the component project name e.g. ng new my-cool-angular-component --create-application=false
Create a new Angular library project
Angular library projects are used for developing reusable components and services that can be published as npm packages. They are a special type of project that can't be run on their own and can only be imported and used within other Angular applications.
Create a new library project for your component with the command ng generate library <project-name> (from inside the workspace folder)
This will generate a project in your workpspace that contains an Angular module with a component and a service.
It's a good idea to check if the package name is already taken on https://www.npmjs.com so you don't have to change it before publishing. Package names must be unique in the npm registry and anyone can publish a package so it's first in best dressed.
Remove unused files from project
The generated Angular library project comes with a component and a service, so if you only need a component you can delete the service and associated files with the following steps:
- Delete the service file
projects/<project-name>/src/lib/<project-name>.service.ts - Delete the service test file
projects/<project-name>/src/lib/<project-name>.service.spec.ts - Update the public api file
projects/<project-name>/src/public-api.tsto remove the reference to the deleted service file
Update the Angular component with your code
Replace the generated Angular component with the custom component that you want to publish to npm.
As an example, below is the component code for the jw-angular-pagination npm package that I published a while ago - https://www.npmjs.com/package/jw-angular-pagination.
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import paginate from 'jw-paginate';
@Component({
selector: 'jw-pagination',
template: `<ul *ngIf="pager.pages && pager.pages.length" class="pagination">
<li [ngClass]="{disabled:pager.currentPage === 1}" class="page-item first-item">
<a (click)="setPage(1)" class="page-link">First</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === 1}" class="page-item previous-item">
<a (click)="setPage(pager.currentPage - 1)" class="page-link">Previous</a>
</li>
<li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}" class="page-item number-item">
<a (click)="setPage(page)" class="page-link">{{page}}</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item next-item">
<a (click)="setPage(pager.currentPage + 1)" class="page-link">Next</a>
</li>
<li [ngClass]="{disabled:pager.currentPage === pager.totalPages}" class="page-item last-item">
<a (click)="setPage(pager.totalPages)" class="page-link">Last</a>
</li>
</ul>`
})
export class JwPaginationComponent implements OnInit, OnChanges {
@Input() items: Array<any>;
@Output() changePage = new EventEmitter<any>(true);
@Input() initialPage = 1;
@Input() pageSize = 10;
@Input() maxPages = 10;
pager: any = {};
ngOnInit() {
// set page if items array isn't empty
if (this.items && this.items.length) {
this.setPage(this.initialPage);
}
}
ngOnChanges(changes: SimpleChanges) {
// reset page if items array has changed
if (changes.items.currentValue !== changes.items.previousValue) {
this.setPage(this.initialPage);
}
}
setPage(page: number) {
// get new pager object for specified page
this.pager = paginate(this.items.length, page, this.pageSize, this.maxPages);
// get new page of items from items array
var pageOfItems = this.items.slice(this.pager.startIndex, this.pager.endIndex + 1);
// call change page function in parent component
this.changePage.emit(pageOfItems);
}
}
Build your Angular component
Run the command ng build <project-name> --prod from your workspace folder to build your component, the output files are created in the dist/<project-name> folder.
The --prod flag tells the Angular CLI to build the component with the old Angular compiler + runtime to make it compatible with previous versions of Angular (before 9). The new compiler + runtime is called Ivy and the old compiler + runtime is called View Engine.
Login to the npm registry with the npm cli
Run npm login from the command line and enter the credentials that you used to sign up to npmjs.com in the first step.
Publish your Angular component to npm!
Navigate to the project dist folder with the command cd dist/<project-name>
Run the command npm publish to publish the component the npm.
Now go and check out your new Angular component on the npm website at https://www.npmjs.com/package/<project-name>. You can also run npm info <project-name> from the command line to see all the metadata info about your package that's stored on the npm registry.
NOTE: To update your package in npm you just need to increment the version number in the package.json file and run npm publish again.
Need Some Angular Help?
Search fiverr for freelance Angular developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!