Angular libraries are fun!

David
Sparkles Blog
Published in
2 min readJul 4, 2017

A few days ago, I stumbled across the following question on stackover:

http://webcache.googleusercontent.com/search?q=cache:tJ9sBhHJdksJ:stackoverflow.com/questions/tagged/angular%3Fpage%3D265%26sort%3Dunanswered+&cd=2&hl=de&ct=clnk&gl=de

For some reasons, the question got deleted! Still, the internet doesn’t forget and you can view it on Google’s cached content.

The answer to the question is: yes, there is one! It’s called ng-packagr!

Of course, ng-packagr is not an “official” tool from the Angular team. There’s quite some story behind how this unfolded. For Angular CLI, library developer mode was announced in Sept’ 16 and then that infamous #1692 issue happened along the way.

Angular Package Format is the story of an officially recommended way of distributing libraries without official tool support. Hm…that’s how we’ve got to take it and find our own way.

Give ng-packagr a try!

With lots of competition, try ng-packagr and see whether it works for you!

In the community, other options are a yeoman generator, a seed, another seed, at least one quickstart lib, a scaffolder, a starter, another starter, yet another starter, and on and on it goes… you can also spend a 15 minute read on a “how to”-article and then go and configure all the the tools by hand…

So now, try the following!

$ yarn add --dev ng-packagr

Create a ng-package.json:

{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
}
}

And run!

$ node_modules/.bin/ng-packagr -p ng-package.json

Et voila! There is your Angular library!

All the starters, and seeds, and generators are a good thing and they are quite popular. The motivation behind ng-packagr is slightly different. Good news: it works well together with those starters and seeds and even with Angular CLI! So you can integrate it into your existing build tool army. The idea for ng-packagr is a small, focused tool that does one job: read in your Angular library, compile and perform all those complicated build steps, and output the result in Angular Package Format.

--

--