5+ tips for Angular Library authors
Tags: angular, package, npm
Published: 2020-04-12 15:57:08

---
title: 5+ tips for Angular Library authors
published: true
date: 2020-04-05 14:06:53 UTC
tags: angular,package,npm
canonical_url: https://medium.com/ng-gotchas/5-tips-for-angular-library-authors-9a9ac60e275f
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pkrhs244dq10jhfh8nhz.png
---

Here’s what works. I found that out the hard way.

These tips are the result of me publishing a few Angular libraries and making some silly mistakes. Hope you find some of them useful:

- Use the **CLI** and library schematic (ng g library) to scaffold your library. It does a lot of work you’ll otherwise need to do manually: Updates angular.json and adds an ng-package.json config file which allows package config. Ng packager emits a standard Angular library with a public-api.ts which is what is expected by the ng compiler.

![Command line output of the command ng generate library useful-lib. Creating files and updating existing ones.](https://dev-to-uploads.s3.amazonaws.com/i/b964357ohp66flv6ncox.png)

- A library has it’s **own package.json (**and readme.md, tsconfig.lib.json, etc.**)**. That makes sense since you'd like to publish the library and the app separately and **independently** from one another. So you’ll need to update them and not the main app ones (like I did :). If we take the useful-lib example from the previous tip:

![The folder view of an Angular workspace with a library highlighting there are actually two package.json files.](https://dev-to-uploads.s3.amazonaws.com/i/fv8cg5ok0skrunl8n35v.png)

- Add the repository to lib’s package.json "repository":"github.com/author/repo". Users would want to visit your open source repo too for issues, code, etc. And allows NPM to get images and other assets from it. That is if your readme.md file references an image from /assets/my-lib.png npm will figure out that it’s actually [https://raw.githubusercousntent.com/author/my-lib/HEAD?assets/my-lib.png](https://github.com/author/my-lib/assets/my-lib.png/raw). _For real-world example see the first image in my_ [_package_](https://www.npmjs.com/package/ngx-show-form-control) _and it’s_ [_raw readme_](https://raw.githubusercontent.com/gparlakov/forms-typed/master/projects/show-form-control/README.md) _for example._

- **Use tags**! Example: `npm publish dist\my-package --tag alpha`. Anything not tagged is considered latest and will be installed for users doing npm install. Meaning that your package version 1.0.0-alpha.0 published without tags (hence tagged latest) will end up in the users’ node\_modules. Then you’ll start getting issues as for production-ready version. Here’s a snapshot of a package I maintain:


![npm version](https://dev-to-uploads.s3.amazonaws.com/i/l0qx6xs9lb2v16hc0t1e.png)



- Document it and make it pretty — add **pics** , **quick start, examples,** and all the things users need to get started using a project. As the author, it’s easy to forget about those things because you know your work in and out. Users don’t so try and make them feel at home by giving them a guide. Think of what you’ll need or better yet — have someone try and use your library and give you feedback. Here’s a pretty, if somewhat contrived example of readme:


![readme example](https://dev-to-uploads.s3.amazonaws.com/i/3npsvoi8c4x82gbe1tyg.png)
<figcaption>Thanks, <a href="https://unsplash.com/@hansonluu">https://unsplash.com/@hansonluu</a> for the pretty pic</figcaption>

- Don’t publish manually — have an automated process that does it for you. When fixing a bug or adding a feature you focus on development. The packaging and pushing to NPM (_or any other package registry_) is not interesting so it’s easy to mess it up or even completely forget about it. I know I have. An example from my [AzDO](https://dev.azure.com/gparlakov/Scuri/_release?_a=releases&view=mine&definitionId=1) pipeline:

![pipeline examples](https://dev-to-uploads.s3.amazonaws.com/i/y6yh2r1fmtbsea58bogh.png)


- Read the angular docs about libraries: [Angular.io](https://angular.io/guide/creating-libraries)

Thanks for reading. I hope it helps!

---
## 🧞‍🙏 Thanks for reading!
Give some 💖 or 🦄  if you liked this post.
These help other people find this post and encourage me to write more. Thanks!

Check out my projects:
- [SCuri](https://npmjs.com/packages/scuri) — Unit test boilerplate automation (with Enterprise support option too)
- [ngx-forms-typed](https://npmjs.com/packages/ngx-forms-typed) — Angular form, only strong typed!
- [ngx-show-form-control](https://npmjs.com/packages/ngx-show-form-control) — Visualize/Edit any FormControl/Group


<a class="bmc-button" target="_blank" href="https://www.buymeacoffee.com/bHQk8Cu"><img src="https://cdn.buymeacoffee.com/buttons/bmc-new-btn-logo.svg" alt="Buy me a coffee"><span style="margin-left:15px">Buy me a coffee</span></a>