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.
>> 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
