How to publish Angular npm package.

Madhu Naik — Wed, 17 Aug 2022 10:29:46 +0000

Angular packages are used to share the same functionality to multiple angular application.

Getting started

Below command will create empty workspace. while selecting the package name always select some unique and meaning full name.



ng new package_name --create-application=false

Navigate to project folder using below command.



cd package_name

Then generate library using below command.



ng generate library package_name

This will create library files inside project folder

for example if you want build package of custom directive or custom pipe then create custom directive using ng generate command



ng g directive name_of_the_directive
// for custom pipe
ng g pipe name_of_the_pipe

Write all you you logic inside pipe or directive, and also we have mention the file in App.module.ts

And also we have to import the newly added file in the public-api.ts file.

Build package

Building the package is similar to angular application build process.



ng build --prod

this will create the dist folder inside your application.

Test your package locally

we can use npm link to test our package before going to publish.

below are the step to link you package to angular application

Build the application using ng build --prod.
Go to dist/package_name folder using the command line.
Use npm link This allows you to reference package_name locally.
Go to you Angular Application where you want to install the package run the below command.



npm link package_name

this will create the symbolic link between the the package_name and your angular Application.

In angular.json file inside architect -> build -> option add the this "preserveSymlinks": true this will keep the link between package and application alive.
Then import your package module inside you Angular application app.module.ts and test you package.



import {NgxNumberonlyDirectiveModule} from 'ngx-numberonly-directive'

@NgModule({

    declarations: [

    ],

    imports: [

      NgxNumberonlyDirectiveModule,

    ],

    providers: [ ],

    bootstrap: [AppComponent]

  })

Publish your package

below are the step to publish your npm package.

Build the application using ng build --prod.
Go to dist/package_name folder using the command line.
You have to login into your npm account using npm login .
Use npm publish to publish your npm package.

Write package information and usage guidelines.

It is very import to write information of the package and usage and installation guidelines. yo have to write all you usage guidelines inside README.md file