Angular: Publish Your Private Angular Library For Sharing Component Using Verdaccio

Sharing components with the private library in Angular

Verdaccio Angular

Introduction

Have you thought to share components in many projects? But you don’t want to copy and paste code in every project to avoid duplicate code. If the purpose is to share components, utility and etc. I think this article will help you to answer your question. Because I want to share about verdaccio.

Verdaccio

Verdaccio is a simple, zero-config-required local private NPM registry. No need for an entire database just to get started. Verdaccio comes out of the box with its own tiny database, and the ability to proxy other registries (eg. npmjs.org), which also introduces caching the downloaded modules along the way.

A lightweight Node.js private proxy registry | Verdaccio

Project Graph

In this tutorial, we will create a project like an image below.

Project Graph

• We setup verdaccio and publish our private library for share component
• Then, we install the private library in another project
• Last, we try to use the share component from the private library in the current project.

Setup Verdaccio

First of all, we need to install verdaccio

npm i -g verdaccio

After that, let’s run verdaccio and look at some configuration

verdaccio

Then, in the terminal will show like this

Verdaccio CLI

Just open http://localhost:4873/ to show the default page verdaccio

Verdacio Page

Setup verdaccio on the local environment is already finished. Next, we will config a project that we want to publish.

Publish Library

I am using this project on a branch private library that gets from the main branch.

GitHub - afifalfiano/angular-tutorial-blogs at private-library

Then, I want to generate a shared module as a library.

ng g library shared-library

Generate Library

Then, let’s create a simple component to share it. Make sure the generated component is assigned to the module shared-library.

ng g c header --module=shared-library.module.ts

Then, update the file header.component.html

<div class="header">
  <p>{{title}}</p>
  <div class="menu">
    <ng-container *ngFor="let item of menuList">
      <a [href]="item.link" rel="noreferrer noopener">{{item.title}}</a>
    </ng-container>
  </div>
</div>

After that, update for styling header.component.html

.header {
  margin: 0;
  background: lightblue;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  font-family: sans-serif;
  align-items: center;

  @media screen and (max-width: 475px) {
    flex-direction: column;
  }

  p {
    &:first-child {
      padding: 10px;
      margin: 0;
      font-weight: 600;
      font-size: 18px;
    }
  }

  .menu {
    display: flex;

    @media screen and (max-width: 475px) {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    a {
      text-decoration: none;
      color: #000;
      padding: 10px;
      transition: .9s;

      &:hover {
        transition: .9s;
        color: #fff;
        padding: 10px;
        background-color: rgb(0, 98, 245);
        border-radius: 5px;
      }
    }
  }
}

Also, update the file typescript on header.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  @Input() title!: string;
  @Input() menuList: {link: string, title: string}[] = [];
}

The result is like this, not a fancy design but only for showing the real component.

Component Header

Don’t forget to update shared-library.module.ts

import { NgModule } from '@angular/core';
import { SharedLibraryComponent } from './shared-library.component';
import { HeaderComponent } from './header/header.component';
import { CommonModule } from '@angular/common';



@NgModule({
  declarations: [
    SharedLibraryComponent,
    HeaderComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    HeaderComponent
  ]
})
export class SharedLibraryModule { }

Also, update public-api.ts to become like this

/*
 * Public API Surface of shared
 */

export * from './lib/shared-library.service';
export * from './lib/shared-library.component';
export * from './lib/shared-library.module';
export * from './lib/header/header.component';

I already pushed the branch on github

GitHub - afifalfiano/angular-tutorial-blogs at private-library

Next, we register the private library into the verdaccio.

Build project

Run this command to build project

ng build shared-library

Dist Shared Library

NPM Add User

After that, add the user on registry verdaccio

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

Publish Library

After creating a user, let’s publish the private library by running this command, make sure when you run npm publish, you should be on folder dist/shared-library.

You can run this command to change the directory into dist/shared-library

cd dist/shared-library

Then, just publish the library

npm publish --registry http://localhost:4873

Publish Library

For the version private library, you can change the version of package.json, and don’t forget to add a change log markdown to document the feature.

Private Library Already Published

The private library has already been published. Next, we want to install it in another project's angular

Install Private Library

I am using this project with a branch using-private-library from the main branch.

GitHub - afifalfiano/angular-tutorial-blogs at using-private-library

If we direct to run this command, maybe we got some error or success but not our private library.

Error Install Private Library

This error is because the npm install is referred to npmjs.

So, to solve this problem, we need to register our private library verdaccio. Create file .npmrc and add this script.

registry=http://localhost:4873

So, I install again my private library

npm install shared-library

If you still getting error on your project, try this solution

Setup Registry Verdaccio

We are successfully installed a private library

Install Private Library

The left side is showing request verdaccio and the right side is processing to install of the private library.

To make sure the private library has been installed. Just check the file package.json and hover on the library angular-tutorial-blogs.

Package.json

Then, we need to try the component header that we have created on the private library.

Then open app.module.ts and import the module shared library.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedLibraryModule } from 'shared-library';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharedLibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After that, let’s try to call the reusable component from a shared library. Open the file app.component.html and update it.

<app-header [title]="'Hello'" [menuList]="[{link: '/', title: 'Home'}, {link: '/product', title: 'Product'}]"></app-header>
<router-outlet></router-outlet>

The result of shared component is like this

Success Use Component From Private Library

We just finished this tutorial about angular and verdaccio.

The branch has already been pushed to my GitHub repository.

GitHub - afifalfiano/angular-tutorial-blogs at using-private-library

Conclusion

We can get some benefits from this library to publishing our private library, for example, some companies have design systems and we need to build a private library because the design system only uses by internal companies.

Another benefit is we can avoid duplicate code if we have several projects with the same user interface, theme, or function.

Hopefully, this article is useful for you, and thank you. If any feedback or suggestion for me, just reply to this article or email afifalfiano2@gmail.com

References

Publishing a Private Angular Library using Verdaccio

A lightweight Node.js private proxy registry | Verdaccio

05 - Publish Angular Library To Local npm - Geekstrick

#Angular #Verdaccio #SharedLibary #PrivatePackage #TutorialAngular