In this tutorial I will show you how to create an Angular library and automatically publish it to NPM using Travis CI.

Create an Angular CLI project ✨

First you create an Angular project using the Angular CLI and then you generate the library project.

ng new my-first-library-project

cd my-first-library-project

ng generate lib my-first-lib

The my-first-library-project acts as a wrapper project you can use as demo application. The my-first-lib project will be created inside the projects folder.

Add package.json metadata 🔧

It is recommended to add additional metadata to the package.json of your library. This can contain information about the author, github repository as well as a description and some keywords. All this helps NPM display helpful information about your package. So be sure to add those fields.

Add the following fields to the package.json located in projects/my-first-lib. ⛔ Do not edit the package.json in the root project!

"name": "my-first-lib",

"author": {

"name": "You",

"email": "you@domain.com"

},

"publishConfig": {

"access": "public"

},

"repository": {

"type": "git",

"url": "https://github.com/you/my-first-lib"

},

"description": "My very first library. It's awesome!",

"keywords": [

"my",

"very",

"first",

"library"

],

"homepage": "https://github.com/you/my-first-lib#readme",

"bugs": {

"url": "https://github.com/you/my-first-lib/issues"

}

You can also prepend the name with a scope e.g. @mynpmusername/my-first-lib or @myorg/my-first-lib to publish the library with a scope.

Add Travis Integration 📦

Before you can use the Travis CI you need to register on the Travis CI website. You can then connect your Github account and add your public repositories to the automated Travis integration pipeline. Each time changes are pushed to these repositories, Travis will execute.

To configure Travis you need to create a .travis.yml file inside your projects root folder.

The following config is very simple and will run the build-ci NPM script everytime changes are pushed to the repository. The build-ci script builds the library using Angular CLI.

"build-ci": "ng build my-first-lib --prod"

Executing tests 🔍

Before publishing a library all tests for it should be executed so no faulty version is pushed to the NPM registry.

When using Karma + Jasmine you have to configure some more things. First you need to add chrome to the Travis config so the tests can run in a browser.

Additionally you need to add a test-ci NPM script that executes the tests in the Travis environment.

"test-ci": "ng test my-first-lib --watch=false --browsers=ChromeHeadless"

The parameters will execute the tests only once and make them run in Chrome Headless browser. For this to work you add the browser as customLauncher to the karma.conf.js inside the projects/my-first-lib folder.

Publishing to NPM 🎉

To publish your awesome library you need to install the Travis CLI. When installed execute the following command in the folder containing the .travis.yml:

travis setup npm

The script will ask you for all relevant data as well as a NPM token. The Travis CLI automatically encrypts this token so it is save to use this generated config in a public repository.

Before publishing you need Travis to navigate to the directory the build artifacts of your library were created in. These were created by the build-ci script.

before_deploy:

- cd dist/my-first-lib

And make sure Travis does not delete these files before publishing:

skip_cleanup: true

The finished Travis config now looks like this:

Triggering a new deployment 🔨

You now have everything in place for Travis to automatically publish your library to NPM. But Travis will only deploy new versions of the library if you push a tagged commit. See line 19 in the Travis config.

Luckily NPM provides a tool (npm version) to automatically do that for you. There is just one minor quirk that you need to look out for.

npm version does only work in directories that contain a .git directory. But the projects/my-first-lib folder does not contain a .git directory. So you need to create an empty .git directory there.

Then you can run npm version inside the projects/my-first-lib folder and the script will automatically bump the version in the package.json, add a commit and tag it with the new version.

cd projects/my-first-lib

mkdir .git

npm version (major|minor|patch)

Now you can push the commit to Github using

git push --follow-tags

And Travis will automatically test, build and publish your library 🎉🤘