How to Publish an Angular Component to npm
The purpose of this post is to walk you through the steps of creating and publishing an Angular component in the NPM package registry in this post
1) Sign up to NPM
In order to publish an Angular component to NPM, first you need to create an account with NPM. You can do this by signing up here (https://www.npmjs.com/signup) for free.
2) Install Node & NPM
You probably already have the NodeJS and NPM installed on your machine, but if you do not have these installed, you can download them from https://nodejs.org/en/download/.
3) Install the Angular CLI
Install the Angular CLI globally with command npm i -g @angular/cli
The Angular CLI is the default command line tool used to develop, build and test Angular applications. For more info see https://cli.angular.io
4) Create a new workspace for your Angular component project
a) The Angular framework develops its projects within a work-space, so you will need to create a workspace before you can create a project within that work-space.
b) Create a new Angular workspace with the command ng new <workspace-name> --create-application=false
c) Then navigate into the workspace folder with the command cd <workspace-name>
d) You can set the --create-application=false flag in order to prevent the creation of a default Angular application project because you'll be creating a library project for your component instead.
e) The workspace name can be the same as the component project name
e.g. ng new my-cool-angular-component --create-application=false
5) Create a new Angular library project
Library projects are used for developing reusable components and services that can be published as NPM packages. They cannot be run on their own and must be imported and used within other Angular applications.
By using the command ng generate library <project-name> (from within the workspace folder) you will be able to create a new library project for your component.
6) Update the Angular component with your code
The generated Angular component should be replaced with the custom component that you would like to publish to NPM.
7) Remove unused files from project
There is a component and a service in the generated Angular library project, so if you only require the component, you can delete the service and the files associated with it.
8) Production Build
In this next step, we will build the package and change the package.json version number for every build.ng build <project-name> --configuration production
9) Login to the npm registry with the npm cli
You need to run npm login from the command line and enter the credentials that you used when you signed up for https://www.npmjs.com/ in the previous step.
10) Publish your Angular component to npm
a) Navigate to the project dist folder with the command cd dist/<project-name>
b) 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.