Create angular library in your private npm registry on AzureDevOps

Johan.Pujol
Nov 2, 2018 · 3 min read

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

Image for post
Image for post

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
Image for post
Image for post

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
Image for post
Image for post

Publishing library

Go to library builded before

cd dist/ngx-private-components
npm publish
Image for post
Image for post

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

Digikare

Learn about Digkare’s developments, product and more

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store