Since Angular 6, we can now use Angular CLI to create our own libraries. A good use case for libraries is when you have any code that has to be shared between different projects / applications. Such code could be components, services, pipes, directives, or even a full module to support authentication for instance.

Let’s see how to create a simple library with Angular CLI. As always, everything starts with a simple command:

ng generate library my-lib

The above command is going to generate a projects/my-lib folder structure at the root of your current project. A sample lib structure is even generated for us:

The sample library has a service, a component and a module in src/lib

At that point, you can write your code in projects/my-lib/src/my-lib just like you would do it in any regular Angular application. For instance, if you create a component, you’ll have to make sure you declare it in your my-lib.module.ts.

Of course, CLI is here to help so you can just run commands with the — project option and our favorite command line tool is going to take care of everything:

Angular CLI will create your component in the right place as well as update my-lib.module.ts when you use the — project option

Another important thing to know is that the public API of your library is defined in projects/my-lib/src/public_api.ts. You should update this file to export the public definitions of your API:

/*

* Public API Surface of my-lib

*/

export * from './lib/my-lib.service';

export * from './lib/my-lib.component';

export * from './lib/my-lib.module';

How to build my library?

As always, a simple CLI command will do the trick — and the build output is going to be created under dist/my-lib:

ng build my-lib

The usual build options are available, so that’s what you want to run for your production build:

ng build my-lib --prod

And if you want Angular CLI to watch for updates and continuously build your library, you can do so since Angular CLI 6.2+with the — watch option:

ng build my-lib --watch

Note: The watch feature requires that Angular’s Compiler Option enableResourceInlining is enabled. This can be done by adding the below in your tsconfig.lib.json

"angularCompilerOptions": {

"enableResourceInlining": true,

...

}

How do I use my library?

In your project, you can simply import and use your library just like you would use any other NPM installed library:

import { something } from ‘my-lib’

How do I publish my library?

If you want to make your library public in the NPM repository, you can run the following commands:

ng build my-lib --prod

cd dist/my-lib

npm publish

If you’ve never published a package in npm before, you will need to create a user account and run npm login first. You can read more about publishing on npm here: https://docs.npmjs.com/getting-started/publishing-npm-packages

Once your library is public, anyone can install it with npm install. Whenever you want to publish a new version, just update the version number in projects/my-lib/package.json and run the above three commands to publish the update. It’s really that easy!