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" |
…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,versionandpublish; - Make sure that the bundle folder with the
package.jsongenerated internally by NG-Packagr has thepackage.jsonin 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
NP package `v3.0.0` now has support to specify the subdirectory to publish, as we have on `npm publish` command. Stop create shell-scripts to publish your NPM packages, just run `np <patch|minor|major> --contents=<your-folder>`https://t.co/mENfCABotE #gde #js #opensource #node pic.twitter.com/7CyMSxUKCf
— Will Mendes (@willmendesneto) May 27, 2018
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 👋