Publishing Angular Module with NP package

Moved to my personal website. Please read without paywalls in http://willmendesneto.com/posts/publishing-angular-module-with-np-package

This is one of the posts about the improvements I've done on ngx-feature-toggle module and in today the topic is: how to publish a new version of my angular module or angular application.

Until few months ago, we had several ways to publish an Angular package, independent or module or application. Currently, we can use @angular/cli directly to create, run tests, validations, builds and more via CLI commands, which's really useful.

You can read more about it on "Publishing your library" section on Angular docs

With that, we can use the same features having the same support to build great libraries as well. You just need to run these commands and all your support is up-to-date 🎉. But a good package should follow some good software principles.

Publish versions needs to be based on Semantic versioning. This standard was created to make sure that upgrade your project using that component should be smooth as much as possible.

We need to keep a changelog (a ) file with all the changes that happened in the project since the beginning. Usually, in opensource (and non-opensource) projects keep the changes/features/fixes/etc. in a file calledCHANGELOG.md

Needs to have a well-defined process to build, bundle and publish. But as you can see in different Angular Projects, there are lots of different ways to publish an Angular module and based in a way to cover different bundle types to be published, such as ESM2015, FESM2015, FESM5, ESM5, UMD and more that NG-Packagr was built.

Another good decision the Angular CLI team applied was to integrate the publish Angular libraries with Angular-CLI using ng-packagr, a package that transpile your libraries to Angular Package Format.

Some projects are using shell scripts…

…or even build systems using Gulp, as used on Angular Material.

However, thenpm publish command by default doesn't trigger any tests and validations. So what you we do in that case?

To cover this scenario and avoid different approaches to publish a package, having a simple way to ship the new versions with all the steps described here in this post and more, I'm glad to share I added support for folder contents, as existent in np publish command.

Moved to my personal website. Please read without paywalls in http://willmendesneto.com/posts/publishing-angular-module-with-np-package

How to use it:

  • Follow the npm events that np triggers: test, version and publish;
  • Make sure that the bundle folder with the package.json generated internally by NG-Packagr has the package.json in the root folder;
  • Be happy, you don’t need more shell-scripts or manual steps to publish you code!

So that's all for now. Follow these steps, run np <patch|minor|major> --no-yarn --contents=./dist for an Angular application, or np <patch|minor|major> —-no-yarn --contents=./dist/<your-angular-module> in case you're publishing an Angular module and you're good to go without any problem at all! 🎉🎉🎉

If you want to check an example, please take a look at the setup of ngx-feature-toggle and ngx-skeleton-loader packages.

… and what if I told you can use @angular/cli` and add all your components there, using it as a mono-repository? But this is a topic for another post ;)

Cya 👋

--

--

Freestyle Solution Architect | Google Developer Expert Angular and Web Technologies | Microsoft MVP Developer Technologies

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wilson Mendes

Freestyle Solution Architect | Google Developer Expert Angular and Web Technologies | Microsoft MVP Developer Technologies