How to publish Angular npm package.
Tags: npm, angular, angularpackage, angularlibrary
Published: 2022-08-17 10:29:46

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyfmhsngxi7z2qac22l9.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/606skpudwo0jizmn19gz.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26oldamgdmrel6ipjsef.png)

## 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 

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 
```
this will create the symbolic link between the the package_name and your angular Application.
5. In angular.json file inside architect -> build -> option  add the this `"preserveSymlinks": true`  this will keep the link between package and application alive.
6. 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.
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnlx6ywc7q2v1bu26slr.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc7bq84d4gevd8m3rz1e.png)