Publish Angular 7 Library To Verdaccio Private Registry On Localhost

Verdaccio is a free private npm proxy registry built in Node.js. So if you want to publish your Angular library in private registry to access only by your network then Verdaccio registry is the best option. I hope, This may help to beginners as explained all steps in very simple way.

Click here for more details (https://verdaccio.org/)

In this tutorial, I will just explain you the simple steps to publish your Angular 7 custom library on Verdaccio private registry. I am assuming you already created your Angualr 7 library, if not then please check below tutorial first.

How to create your first angular 7 library (link)

So lets start with Verdaccio private registry setup and configuration.

Step 1: Install Verdaccio
>> npm install -g verdaccio

Step 2: Install pm2, will require to start Verdaccio service

>>npm install pm2 -g

Step 3: Run Verdaccio in background using pm2

>> pm2 start /verdaccio bin file path

In my case on windows machine: pm2 start C:/Users/userName/AppData/Roaming/npm/node_modules/verdaccio/bin/verdaccio

Step 4: Set the verdaccio registry as a source. By default original NPM registry set.

>> npm set registry http://localhost:4873/
>> npm set ca null

Step 5: Registering a user in verdaccio registry

>> npm adduser --registry http://localhost:4873

It will ask for username, password and valid email id to be entered. Make a note of this details that will use to login in verdaccio registry to publish our library.

Step 6: Go to angular workspace "libraryCollection"
>> cd libraryCollection

Step 7: Login into verdaccio registry. Enter the same username, password and email id set in Step 5.
>> npm login

Step 8: Go to /libraries/dist/your-library-name/your-library-name-0.0.1.tgz
>> cd libraries
>> cd dist
>> cd your-library-name

Step 9: Finally publish our library your-library-name-0.0.1.tgz on verdaccio registry

>> npm publish your-library-name-0.0.1.tgz

Now browse http://localhost:4873 and you will see new our library package there.

That's it. If you want to use your verdaccio library package from other Angular project then follow these steps.

Step 1: If you already have other angular application then go to root of that application or create new app using below commands.

>> ng new new-project

Step 2: Go to root of your new project and our library package from verdaccio registry.
>> cd new-project
>> npm install your-library-name

Step 3: Now we can import it in app.module.ts of new project

import { YourLibraryNameModule } from 'your-library-name';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    YourLibraryNameModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Step 4: Lets add our library selector tag "your-prefix-name-your-library-name" in app.component.html to display library component content.

Lets assume, your-prefix-name = webtechfunda and your-library-name = myfirstlib
then the tag will be like below.


Step 6: Run your new project by using below command and check output. you should see your library content on your new application page.

>> ng serve -o



Conclusion:

That's It Guys! At the time of writing (Nov 2019), I am not an Angular 7 expert but shared this knowledge with you whatever I experienced while learning. So if you have any opinions or suggestion related to this tutorial, Please feel free to comment and share your suggestions.


Check Recommended Articles:
How To Uninstall Verdaccio From Angular 7 Workspace
How to create your first angular 7 library