Create angular library in your private npm registry on AzureDevOps

Today, we are quickly see how to setup an angular library, publish it into your private npm registry on you AzureDevOps project.

This library will be a collections of reusable components.

Create your private repository

Select Artifcats to create it, and follow this tutorial good tutorial https://docs.microsoft.com/en-us/azure/devops/artifacts/get-started-npm

Good you have create your feed. Now let’s write the library

Creating library with Angular CLI

Create a project

ng new vso-angular-lib

Add the library project

cd vso-angular-lib
ng g library ngx-private-components

The library is under projects folder.

Remove all files in libfolder.

Create two components for example

Place on lib folder and create the components.

cd projects/ngx-private-components/
ng g m src/lib/button && ng g c src/lib/button --export
ng g m src/lib/badge && ng g c src/lib/badge --export

Adding style on button component

Adding style on badge component

Now, components are designed, we are finishing to setup the lib for using it.

Setup library

We are creating different file for simplify export of different module. (heavily inspired from Angular Material).

In your badge & button folder create public_api.ts file. And export the current module.

// badge/public_api.ts
export * from './badge.module';
// button/public_api.ts
export * from './button.module';

Create index.ts into badge & button folder and export the local public_api

export * from './public_api';

After that, we have to export all module into our library. On public_api.ts in ngx-private-components/src folder add :

export * from './lib/badge';
export * from './lib/button';

Now the different components of library it’s done, we are build and publishing it.

Build the library

Place into project root and run

// ngx-private-components it's the name off my lib
ng build ngx-private-components

Publishing library

Go to library builded before

cd dist/ngx-private-components
npm publish

Using the library

ng new vso-angular-test-lib

Install the lib

npm i --save ngx-private-components

Now we can use the different components by adding the modules on your app.module

imports: [
//...
ButtonModule,
BadgeModule
],

In the view add the components

<lib-button label="Button"></lib-button>
<lib-badge label="Bagde 1" color="warn"></lib-badge>
<lib-badge label="Bagde 2" color="success"></lib-badge>

Conclusion

AzureDevops will permit simply to create our npm private registry and Angular CLI to create a library quickly.

The merge of two is a prefect combo