Published:

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:


Tutorial Contents

  1. Sign up to npm
  2. Install Node & npm
  3. Install the Angular CLI
  4. Create an Angular workspace
  5. Create an Angular library
  6. Remove unused files
  7. Update the Angular component
  8. Build your Angular component
  9. Login to npm
  10. 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.ts to 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.

 

Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.

 


Supported by