Create a Publishable Angular library with Nx

In the following article, you will learn how to create a publishable Angular 7 library using Nx.

Nx is an extension for the the Angular CLI implementing the monorepo-style development. It is also a collection of runtime libraries, linters, and code generators helping large teams build better with Angular.

I have been using Firebase for my projects and created a small library to streamline the CRUD operations and have them map the results to entities.

After having this library on my projects I decided it was time to publish it to NPM .

When I started looking for how to create the library, there was not a lot of resources on how to create them and what were the best practices.

In the beginning, I have published the library and documentation using the Yeoman generator-ngx-library. I recommend you to give it a try, it is solid and has a lot of features like:

• Integrated demo app built with angular-cli and ng-bootstrap
• Project Documentation built with compodoc and published along with demo app 📚
• Continuous Integration with Travis CI
• Publication to npm registry
• Releasing to Github

Once I found out that Nx offered a way to generate publishable libraries, and inspired by all the good work on the generator I made the decision to switch to Nx to leverage all the amazing features it offers.

This is the first post of more to come, where I will cover more in detail how to publish documentation, continuous integration, testing, and more.

so, lets get started.

Getting Started

Install the angular Cli.

yarn global add @angular/cli

Install @nrwl/schematics

yarn global add @nrwl/schematics

You can also install Angular Console to manage your new Angular workspace and run CLI commands at ease.

Create workspace

Run the following command

create-nx-workspace your-library-name

Optional: Add Jest

You can add Jest to your project for unit tests by running the following command

ng generate @nrwl/schematics:jest

Nrwl Nx 6.3: Faster Testing with Jest

Nrwl Nx 7.0: Better E2E testing with Cypress

Create the Documentation Application

This is the application that can be used as documentation for your library.

Note: the command specifies that this application will have routing, use Cypress for E2E, Jest for Unit Tests and SCSS.

ng generate @nrwl/schematics:application documentation
--prefix=ng --style=scss --e2eTestRunner=cypress --unitTestRunner=jest --routing

The command will generate the following files

Add pages to the Documentation application

Use the following command to generate a route for the documentation website.

Note: It uses Lazy loading and it points to the documentation module.

ng generate @nrwl/schematics:library home --directory=documentation-ui --prefix=ngx --parentModule=apps/documentation/src/app/app.module.ts --routing --lazy --unitTestRunner=jest --e2eTestRunner=cypress 

This generates the route in libs/documentation-ui

Add the publishable library

This last command will generate the library. I used ‘core’ as the name of the library to import it in other projects as ‘ngx-datacontext/core’

ng generate @nrwl/schematics:library core --publishable --unitTestRunner=jest

Summary

With a couple of commands, you can create a publishable library that also contains the documentation website ready to deploy.

Link to the library I am developing:

alfredoperez/ngx-datacontext

Coming soon, I will elaborate more on how to test the library, publish to NPM, deploy documentation to Github Pages, use Travis, generate documentation using Compodoc and more...