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.

Version 6 of Angular Now Available The 6.0.0 release of Angular is here! This is a major release focused less on the underlying framework, and more on the…blog.angular.io

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…

# Usage:
# PKG_VERSION=<patch|minor|major> ./publish.sh
npm run test && \
npm run build && \
npm run bundlesize && \
node ./build.js && \
npm publish dist && \
npm version $PKG_VERSION -m "v%s"
view raw ng-publish.sh hosted with ❤ by GitHub

…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.

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!

You can find more about it in this tweet


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](https://www.npmjs.com/package/ngx-feature-toggle) and [ngx-skeleton-loader](https://github.com/willmendesneto/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 👋

Subscribe

To keep up with posts on this blog, you can also subscribe via RSS.