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.
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
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
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.
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. 🎢
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.
Subscribe to be the first to get our expert-written articles and tutorials for developers!