Angular Component Libraries

I’ve recently been learning to use Angular for work, building simple UI tools with it. I like the framework — different than React, but similar goal of creating re-usable components.

One neat thing with Angular 6 is the ability to create your own libraries! This was useful to me, since I was creating three similar apps with many shared UI components (i.e. a table with selectable rows). This is apparently behavior that was previously supported by a separate library, ng-packagr, and then rolled into the Angular CLI with version 6.

As of right now, though, the documentation for the feature is a bit fragmented. Most of the CLI commands to create libraries are contained in this wiki page of user stories (and otherwise briefly mentioned in various GitHub issues), and some of the details can only be found on the original ng-packagr docs. For example, I wanted to create sub-packages (or secondary entry-points), so that I could do something like:

import { MyComponent } from '@mylibrary/subpackage1';

The ability to do this is briefly mentioned in the ng-packagr docs, though not mentioned in the Angular 6 CLI page explicitly. So don’t forget to check the original documentation if there is library functionality that you’re looking for!