Learn about ng-packagr, a tool that enables you to easily transpile your libraries to the Angular Package format, on this episode of Angular Air.
Angular Air (@ngAir) is a live, video broadcast about Angular. Each week, it features a panel of developers (with guests) discussing tools or newsworthy topics. It's been around since November 2014 and you can find recorded episodes on its YouTube channel, AngularAir.
A recent episode featured ng-packagr, a tool that enables you to transpile your libraries to the Angular Package Format.
This episode's guest was David Herges, author of ng-packagr and was hosted by Justin Schwartzenberger and accompanied by Mike Brocchi, Austin McDaniel, and Alyssa Nicoll (that's me!).
If you'd like to package a component up and share it with someone, currently the CLI doesn't support this. So you need to do all this configuration (which takes a TON of time). Instead, assume a typical configuration in package.json (i.e. package.json from ngx-datatable), and with ng-packagr, you install this package with npm install, drop in a few config files, run a few commands, and badda-bing badda-boom, you're all packaged up!
Angular Package Format - the recommended way for distributing libraries over npm. Let's start with npm install @angular/core (or @angular/cdk or whatever) and look at the contents in node_modules.
npm install @angular/core
I'd like to point at Jason Aden's example, which he gave at the Mountain View Meetup a few weeks ago:
The original idea is that you describe your library in a package.json (the one that you will publish to npm) and then ng-packagr can extract all the information from there.
Shall we look at how the packaging works internally? I would not want to show just a live "how to get started" example, but rather let's look at how it's implemented, what options you have and talk along some of these points.
Like the main.ts entry of an application, a library usually has a public_api.ts exporting the public components and directives and classes and so on. There's a cool feature that lets you have several entry points in one npm package (like @angular/common/http or @angular/core/testing).
Flat ES modules (or FESMs) refer to the flattened versions of Angular modules; a "rolled up" version of the Angular code in the EcmaScript Module format. They were introduced in the 6.0.0-beta.5 (2018-02-22) release. According to the release notes, this format should help tree-shaking, help reduce the size of your generated bundles, and speed up build, transpilation, and loading in the browser in certain scenarios.
For distribution via CDNs, e.g. plunkr, everywhere you include Angular via a <script> tag. Watch out with UMD module IDs! External dependencies: peerDependencies versus "embedded" dependencies.
Yes! Juri Strumpflohner gave a great talk at NG Belgium 2017 called "Create and Publish Angular Libs Like a Pro":
Looking for something new to check out? Take a look at these suggestions of interesting picks from each of the Angular Air panelists.
Alyssa is an Angular Developer Advocate & GDE. Her two degrees (Web Design & Development and Psychology) feed her speaking career. She has spoken at over 30 conferences internationally, specializing in motivational soft talks, enjoys gaming on Xbox and scuba diving in her spare time. Her DM is always open, come talk sometime.