DEV Community

Madhu Naik
Madhu Naik

Posted on

How to publish Angular npm package.

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


Enter fullscreen mode Exit fullscreen mode

Navigate to project folder using below command.



cd package_name


Enter fullscreen mode Exit fullscreen mode

Then generate library using below command.



ng generate library package_name


Enter fullscreen mode Exit fullscreen mode

This will create library files inside project folder
Image description

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


Enter fullscreen mode Exit fullscreen mode

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

Image description

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

Image description

Build package

Building the package is similar to angular application build process.



ng build --prod


Enter fullscreen mode Exit fullscreen mode

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

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


npm link package_name 


Enter fullscreen mode Exit fullscreen mode

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

  1. In angular.json file inside architect -> build -> option add the this "preserveSymlinks": true this will keep the link between package and application alive.
  2. 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]
})

Enter fullscreen mode Exit fullscreen mode




Publish your package

below are the step to publish your npm package.

  1. Build the application using ng build --prod.
  2. Go to dist/package_name folder using the command line.
  3. You have to login into your npm account using npm login .
  4. 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

Image description

Every time before publishing the package please change the version inside package.json file other wise it will throw error. Also you can Add keyword and license related to your package inside package.json.

Image description

Top comments (0)