Turnstile Web

Managing Your Angular CLI Library

We've recently implemented a shared Angular library for an organisation. We have business-facing and customer-facing applications and want to reuse shared code across them. The proof of concept was largely developed based on the fantastic The Angular Library Series. In this article we'll touch on some of the key points of the aforementioned series, to set us up for future articles we'll be writing as part of a series exploring how to manage the library. As the organisation's library is maintained by more than 10 developers, our goal is extend this concept to support developers with:

  1. making changes to the library and applications that depend on it,
  2. build and release to a registry (NPM, Nexus) following semantic versioning, and
  3. automating the steps required to achieve the previous points, to later be run in a Continuous Integration (CI) environment

A simple example of this is available from https://github.com/alexisbmills/angular-library-series/tree/part-1.

Creating the project library

We start by generating the project and the library using Angular 7 CLI:

$ ng new --create-application=false --skip-commit
$ cd my-project
$ ng generate library my-library

The Angular CLI will automatically generate a basic Angular Module for the library containing an empty Component and Service. We now have 2 package.json files with different roles:

  1. /package.json - we will create some scripts here for managing development, build, and release of the library. It contains the project version.
  2. /projects/my-library/package.json - the library package file. We will mostly avoid making edits to this file other, the version in this file is to be updated

Building the library

At this point we can build the library by adding a script to /package.json which builds the library to /dist/my-library:

{
 "scripts": {
    "build:my-library": "ng build my-library"
  }
}

Publishing the library

To package the library for publishing we update our /package.json with the following scripts to build our library, copy the readme, and package it up for publishing. Once packaging is complete we then publish the library to our registry (NPM).

{
 "scripts": {
    "build:my-library": "ng build my-library",
    "package:my-library:readme": "copy .\\README.md .\\dist\\my-library",
    "prepackage:my-library": "yarn build:my-library && yarn package:my-library:readme",
    "package:my-library": "cd dist/my-library && npm pack"
  }
}
$ yarn package:library 
$ cd dist/my-library 
$ npm publish

We can now start using our published library in other projects!

Conclusion

In this article we've covered the basic steps of creating an Angular library and publishing it. This is the beginning of a series of posts where we'll go deeper into how to manage code changes for teams, versioning, and publishing the library to a private registry.

Picture of the author

About the Author

Alexis Bradley-Mills is a web developer with over 10 years experience developing websites and software for various international organisations.