Cómo crear y publicar una librería de componentes Angular en un registro privado con Verdaccio y npm

¿Tienes una serie de componentes reutilizables en Angular y quieres compartirlos entre varios proyectos sin subirlos a npm público? La solución perfecta es usar Verdaccio, un registro privado de paquetes npm.

En este artículo te guiaré paso a paso para:

• Crear una librería de componentes en Angular
• Configurar Verdaccio como registro privado
• Publicar tu librería con npm
• Usarla en otros proyectos Angular

Requisitos

Antes de comenzar, asegúrate de tener instalado:

• Node.js
• Angular CLI – npm install -g @angular/cli
• Verdaccio – npm install -g verdaccio
• Git (opcional, pero útil)

Paso 1: Crear un Workspace de Angular

ng new ng-components-workspace --create-application=false
cd ng-components-workspace

Esto crea un proyecto base de Angular sin una aplicación, ideal para trabajar con librerías.

Paso 2: Crear la librería de componentes

ng generate library ui-components

Esto generará:

• Carpeta projects/ui-components
• Módulo UiComponentsModule
• Configuración de build

Paso 3: Crear un componente

ng generate component button --project=ui-components

Luego, asegúrate de exportar los componentes en projects/ui-components/src/public-api.ts:

export * from './lib/button/button.component';
export * from './lib/ui-components.module';

Paso 4: Construir la librería

ng build ui-components

Angular genera el paquete compilado en dist/ui-components.

Paso 5: Instalar y configurar Verdaccio

Opción 1: Instalar localmente

npm install -g verdaccio
verdaccio

Opción 2: Usar Docker

docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio

Accede a tu registro local en http://localhost:4873

Paso 6: Configurar npm para usar Verdaccio

Crea un archivo .npmrc en la raíz del proyecto o de forma global:

registry=http://localhost:4873

Inicia sesión:

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

Cada vez que se reinicie la maquina o el contenedor es necesario hacer login en verdaccio:

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

Paso 7: Publicar la librería

Desde el directorio dist/ui-components:

cd dist/ui-components
npm publish --registry http://localhost:4873

Paso 8: Usar la librería en otro proyecto Angular

En otro proyecto Angular:

1. Asegúrate de tener el mismo .npmrc
2. Instala la librería:

npm install ui-components

3. Usa la librería en tu AppModule:

import { UiComponentsModule } from 'ui-components';

@NgModule({
  imports: [UiComponentsModule],
})
export class AppModule {}

Ventajas de esta estrategia

• Privacidad: Tu código no sale de tu red
• Velocidad: Publicar e instalar es instantáneo
• Control: Manejas tus versiones y acceso
• Escalabilidad: Ideal para múltiples equipos/proyectos

Consejos adicionales

• Usa nombres con scope (ej: @miempresa/ui-components)
• Maneja versiones con npm version patch|minor|major
• Automatiza el proceso con scripts si lo usas frecuentemente

Video Tutorial

🔗 Mira el video tutorial aquí

Repositorio con el Ejemplo

Puedes encontrar el código completo de este ejemplo en el siguiente repositorio de GitHub:

🔗 Repositorio en GitHub: smtp-java

Conclusión

Crear y compartir una librería de componentes Angular nunca fue tan fácil como con Verdaccio + npm. Esta estrategia es ideal si trabajas en equipo, manejas múltiples proyectos o simplemente quieres control total sobre tus dependencias.