Creating new angular library and publishing it in NPM
Tags: angular, npm
Published: 2020-08-16 08:32:53

My new package -> [https://www.npmjs.com/package/mat-phone-code-validator](https://www.npmjs.com/package/mat-phone-code-validator)

Yes, its exciting. Sometimes you need to extend the Angular functionality by creating Angular libraries. Like having multiple apps using same functionality. Exposing a functionality to third party and so on... In these cases its best to create NPM library with just the functionality to be shared.

Angular site has [details steps here](https://angular.io/guide/creating-libraries). What I would like to demonstrate here is to follow the steps to create a NPM library. I have already created a library **[phone code validator](https://www.npmjs.com/package/mat-phone-code-validator)**. I have seen a component like this is needed across different projects. Thus have decided to create a perfect one and deploy it in NPM and can use it in other projects if necessary.

Ok, lets get to it. the full code is present at this repo [https://github.com/vishesh1king/mat-phone-code-validator](https://github.com/vishesh1king/mat-phone-code-validator)

# Create a library skeleton
First we will have to create the skeleton of the library code structure. Use following Angular CLI commands,

> **ng new my-workspace --create-application=false
cd my-workspace
ng generate library mat-phone-code-validator**

After executing the commands this is how my folder structure was,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v041vxfc382f72cgpwy1.png)

Now the library mat-phone-code-validator is created. Under the **lib** folder you will have the `module.ts`, `component.ts`. We need to write the functionality here. The repo has the full code, you can clone it and check.

In-case we have dependencies then navigate to **lib** folder and install it one by one. Below is the `package.json` file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e2lhm210zq4ylefwx0jp.png)

Since we have third party dependency, we must include them under whitelistedNonPeerDependencies in `ng-package.json`. Else the library build will fail and suggest us to add as peer dependency. If added as peer dependency then NPM will not install during library installation and you cannot use it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ouzk0qr4ep8lcy5s7np8.png)

**A special case**, i was installing angular material and i faced below error. The solution is to install angular schematics `npm install @schematics/angular`. Check the angular version and install that version appropriately. I used angular 8 thus i used `npm install @schematics/angular@9.1.0`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ha83tmns0dxyof50n2it.png)

If in-case we have more code and functionalities that we want to expose in the library than the default main component file then **export** it in the `public-api.ts` file.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lj7w6641oe4597w9i9ka.png)

# Build the library
Once we have written what we need to run. Below is few points to note before we build the library.

* Add `enableIvy: false` under the tsconfig.lib.json. This will enable using **angular View Engine** to compile the library rather than Ivy. Only if Angular View Engine is used the library will be compatible with older angular versions.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4h0sw0nhw544k7j73inu.png)

Use below commands to build your app,
> // go to the projects folder
cd lib-workspace/projects/mat-phone-code-validator
// build the library
ng build mat-phone-code-validator --prod

If all success then the build will be present under the `lib-workspace->dist` folder.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/19ynbkiiygreojbvvh48.png)

**Nope, Saw a huge list of errors that blew your mind?** Don't worry i got you covered. Below is the error i faced when i ran the application,

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/suiuwk1mqcf54tljletf.png)

* Here is the problem, the 'ng new my-workspace' command actually created a older angular version workspace. You can Check the angular and cdk versions in package.json. Its older ones thus, the solution is simple We just have to update them. Use below commands to do so,

> // go to the projects folder
cd lib-workspace/projects/mat-phone-code-validator
// Update angular core
ng update @angular/core @angular/cli
// Update material if you use it else need not execute below command.
ng update @angular/material

* Then in `tsconfig.lib.json` add `experimentalDecorators: true` value under angularCompilerOptions to avoid module errors.

# Test locally
Since its a library we cannot run it as such. There is a way to use the library build locally. You need to `pack` it and use in a demo app. In the Repo you can see there is a demo angular project where i have implemented it. You can check full code there.

* First we need to take build which is already done in previous step
* Now need to pack it using below command 
> // Go to dist folder
cd dist/mat-phone-code-validator/
// Pack it as a zip
npm pack

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qyhp0b5sqjrzgni0gc9z.png)

* This will create a package tgz file which you can install direct in the demo app using by referring this compressed file. Example below,

> npm install ../lib-workspace/dist/mat-phone-code-validator/mat-phone-code-validator-0.0.1.tgz

* Now you can include this in the sample angular project's module file like below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f94prfvz6fwoaxjbypol.png)

* You can call it in the component HTML like below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6r9inwdj0t5yqdx1mxx8.png)

* Run the demo app to see the output.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/029ncfsuk2qn5uowtrig.png)

# NPM publish
Finally our library is working. Kudos to that !!! Now we need to publish to NPM. Its pretty simple. Before that we need to create a NPM account and initialise it in the library.

* Setup your NPM account at [https://www.npmjs.com/signup](https://www.npmjs.com/signup) and verify you email. Else, you cannot publish any package.
* Now need to login to npm in the library.
> // Navigate to library dist
`cd lib-workspace/dist/mat-phone-code-validator`
`npm login`
* Test: Type `npm whoami` from a terminal to see if you are already logged in.
* If all good then run `npm publish`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dgjsdxifda2oqd7mn1r1.png)

Go and check you package in npm. It would have been published.

# More notes
* Before publishing your package. Always update your read me. Because that the first page.
* Update you package json with license, homepage, repository, author, etc... This will add more details to the NPM. Check the repo for mine.

# Conclusion
Phew !! Since is have lot of dependencies it took me awful long around 16hrs. To complete first version. Let me know how long it takes for you. Also, let me know in comments if you face any errors ect... May be i got it too, i might help out.