npm for Angular - How to Publish an Angular module to npm

For javascript web developers like nodejs and angular developers, it's the most important and most useful npm modules. from npm modules, we can easily implement any modules as per our requirements very easily within 5 minutes.

if you are a web developer you can easily publish your own npm modules and help other developers to implement it.

So, let's start with how to publish our own npm angular module in npmjs.

For nodejs and angular, there are many different ways to create an npm library. Here we will discuss about make an angular library and publish it. 

=>Requirements and overview of steps

->Sign up to npm (sign up in npm for free)
->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
->Test It locally before publish
->Login to npm
->Publishing the npm Package
->Republishing after some changes (if required)

=>Create a new workspace for your Angular component project

Syntax:
ng new <workspace-name> --create-application=false

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.

Example:
ng new welcome-test --create-application=false

=>Create a new Angular library project

Syntax:
ng generate library <project-name>
Example:
ng generate library welcome-test-lib

from this command, one new project for the library will be generated.
directory structure may be like as

└── welcome-test
    ├── projects
    └── welcome-test-lib
        ├── karma.conf.js
        ├── ng-package.json
        ├── package.json
        ├── README.md
        ├── src
        │   ├── lib
        │   │   ├── welcome-test-lib.component.spec.ts
        │   │   ├── welcome-test-lib.component.ts
        │   │   ├── welcome-test-lib.module.ts
        │   │   ├── welcome-test-lib.service.spec.ts
        │   │   └── welcome-test-lib.service.ts
        │   ├── public-api.ts
        │   └── test.ts
        ├── tsconfig.lib.json
        ├── tsconfig.lib.prod.json
        ├── tsconfig.spec.json
        └── tslint.json
        ...
        ...
        ...
    ├── node_modules
    ├── angular.json
    ├── package.json
    ...
    ....
    ....

=>Update the Angular component with your code
  after generating a new workspace for the library you can add your logic in the projects directory's src.
  you can add update your login in src like as we write in angular project.
  if you create any new service or component files or any other you need to add/remove in public-api.ts files.

=>Build your Angular component
  after successfully implemented your code run the build command from the root directory with the given following command

Syntax:
ng build <project-name> --prod

 The output files are created in the dist/<project-name> folder

Example:
ng build welcome-test-lib --prod

=>Let's Test It locally before publish (goto dist directory)
After the build is successfully done for the test locally, run the following commands.

sudo npm link

After running this command you can use this in any other projects without publishing in npm. now run this command and link it for testing purposes.

after this create your new angular demo project in another directory or you can use it in your existing project.

if you don't have any other project you can quickly set up a new angular project by the following command

Syntax:
ng new <project name>

Example:
ng new my-welcome-demo

for use, it from locally before npm publish run following command for npm install

Syntax:
npm link <package-name>

Example:
npm link welcome-test-lib

after this import node module and use it as

app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  ....
  ....
  ....
  import {WelcomeTestLibModule} from "welcome-test-lib";
  ....
  ....
  ....

@NgModule({
  declarations: [
    ....
    ....
    ....
  ],
  imports: [
    ....
    ....
    ....
    WelcomeTestLibModule,
    ....
    ....
    ....
  ],
  providers: [
    ....
    ....
    ....
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

....
....
....
....
<div>
    <lib-welcome-test-lib></lib-welcome-test-lib>
</div>
....
....
....
....

=>Login to npm
 After successfully testing you can publish your package.
 for that run following command for login npm in cmd

 npm login

By this command input your user name, password, and email id as used in the npm signup 

=>Publishing the npm Package
after login to npm, form cmd go to dist directory -> package name and then run following command

npm publish

 from this, your npm module will be published and you can check it from the npmjs link and search your module

=>Republishing after some changes (if required)
increase version number form package.json from dist and then

npm publish

After those processes, you can see your module in npm. to display the proper installation process description you need to modify the README.md file. MD file has its own syntax to display in as per our requirements like as display heading, display example in code formate, etc. so if you don't know about it you can R & D and it's easy for learn it.

after updating the MD file you need to rebuild and republish it.

I hope it's clear how to publish your own npm angular module in npm.