Publish Angular Library created with Nx to NPM

This is the third part for a series of posts that will help you to create an Angular 7 publishable library and its documentation using Nrwl Nx Angular Extensions, Travis CI, and GitHub pages.

Nrwl Extensions for Angular

This article covers the following things:

• Create Npm package
• Publish library to Npm

Here are the links for all the parts of this series:

Part 1. Creating an Angular library with Nrwl Nx

Part 2. Publish Angular Library documentation created with Nx using TravisCI and GitHub Pages

Part 3. Publish Angular Library created with Nx to NPM

Part 4. Generating Changelog file for an Angular library

Add library details to package.json

You need to a set of information that will be used on NPM to the package.json.

This should be added into the package.json file located in the library folder and also in your root package.json.

// ./package.json
// ./libs/core/package.json
{
  ...
  
  "name": "@ngx-datacontext/core",
  "description": "Data context service for Angular applications to easily create data services and link them to entities.",
  "version": "0.0.7",
  "homepage": "https://github.com/alfredoperez/ngx-datacontext",
  "author": "Alfredo Perez (https://github.com/alfredoperez)",
  "license": "MIT",
  "keywords": [
    "ng",
    "angular",
    "library.datacontext",
    "entity"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/alfredoperez/ngx-datacontext.git"
  },
  "bugs": {
    "url": "https://github.com/alfredoperez/ngx-datacontext/issues"
  },
  "peerDependencies": {
    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
    "@angular/core": "^6.0.0-rc.0 || ^6.0.0",
    "@angular/fire": "5.1.0",
    "lodash": "^4.17.11"
  }
  ...
}

Replace all links and information with what is related to your library and where it can be found. Also, make sure to list any peerDependencies or dependencies of your library.

Create files to be distributed with your library

1. Add README.md

The repository should have a readme file already, but you should replace this with important information about your library, like how to install it, use cases, etcetera.

2. Add Changelog.md

This file should have the changes made to the library version by version.

3. Add LICENSE file

Add Scripts to generate NPM package

1. Install npm-run-all

This is not a requirement, but it will make the scripts more readable and you can even set it up to run scripts on parallel or sequentially.

yarn add -D npm-run-all

npm-run-all

2. Add scripts to copy files

This will take care of copying the readme, changelog and license files to where the library was built.

// package.json
...
scripts:{
 "copy-readme": "copy .\\README.md .\\dist\\libs\\core",
 "copy-license": "copy .\\LICENSE .\\dist\\libs\\core",
 "copy-changelog": "copy .\\Changelog.md .\\dist\\libs\\core", 
 "copy-files": "run-s copy-readme copy-license",
}

3. Add scripts to bump library version

We need to have three scripts for this, in order to use semantic versioning and be able to update major, minor or patch version.

Semantic Versioning 2.0.0

// package.json
...
scripts:{
"bump-version:major": "npm version major --force 
                       && cd libs/core
                       && npm version major --force",
"bump-version:minor": "npm version minor --force
                       && cd libs/core 
                       && npm version minor --force",
"bump-version:patch": "npm version patch --force
                       && cd libs/core 
                       && npm version patch --force",
}

This script is modifying the version in the root and the library package.json files.

4. Add script to create npm package

This will take care of building the library, copying the needed files and packaging for npm

"build:lib-pack": "ng build core
                   && npm run copy-files 
                   &&  cd dist/libs/core 
                    && npm pack",

Extra — Add a script to commit changes to GitHub

This can be used to automatically commit changes after a new package is created.

"commit-git": "git commit -m \"build: adds new release\" 
               && git push origin 
               && git push origin --tags",

5. Add scripts to create packages for minor, major and patch version.

"pre-publish:minor": "run-s bump-version:minor
                            build:lib-pack
                            commit-git",
"pre-publish:major": "run-s bump-version:major
                            build:lib-pack
                            commit-git",
"pre-publish:patch": "run-s bump-version:patch
                            build:lib-pack
                            commit-git",

6. Create an NPM organization

Since we are building a scoped library, we will need to create an npm organization to deploy our library.

If you recall, from the package.json library details in my library the scope is ngx-datacontext and the library will be core.

"name": "@ngx-datacontext/core",

Use the following link to create the organization.

npm — Create-organization

7. Publish your library

You are all set! now is time to try out the scripts and publishing the library.

Create the library using one of the build scripts

npm run pre-publish:minor

When this finishes it will create the library package (.tgz) on the dist/libs/{library-name} folder.

To publish we only need to execute the following command using the name and the version of the tgz file created previously

npm publish --access public
            ./dist/libs/core/ngx-datacontext-core-0.0.4.tgz