Dive Into ng-packagr on this Episode of Angular Air

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!).

Episode Notes

Why Use ng-packagr?

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!

What is ng-packagr?

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.

How Do You Use ng-packagr?

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.

What is an Entry File (Entry Point)?

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

What are Flat ES Modules?

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.

Why Universal Module Definition (UMD)?

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.

Why not Webpack (or Parcel or FuseBox)?

(Most) JavaScript module bundlers wrap external resources (HTML, CSS, and so on) in some sort of JavaScript module and require(...) the asset. For packaging libraries and because of Angular's AoT compiler, we need to inline the external resources. If you like to go really deep, we can talk through the implementation in ng-packagr with the crazy TypeScript AST traversal. 🎢

Can I Implement My Own Packaging?

Yes! Juri Strumpflohner gave a great talk at NG Belgium 2017 called "Create and Publish Angular Libs Like a Pro":

Panelist Picks

Looking for something new to check out? Take a look at these suggestions of interesting picks from each of the Angular Air panelists.

• Mike
  • Polacode
• Austin
  • Webpack Stylish
  • Angular CLI 1.7
• Alyssa
  • Time Complexity/Big O Notation: Scaling Algorithms Instead of Applications by Tim Roberts
  • ANGULARJS FINAL RELEASE IN JULY 😭
• Justin
  • Create a CD pipeline with Angular, GitLab and Firebase by Juri Strumpflohner