Creación de librerías NPM en Angular

Puede surgir la necesidad de que una organización en sus procesos y proyectos requiera la reutilización de las mismas funciones, componentes o módulos. Para este tipo de necesidad, el framework Angular ofrece herramientas para una fácil creación de librerías NPM (Node Package Manager), el cual es un gestor de paquetes que nos permite administrar las dependencias de proyectos por defecto para javascript, las cuales normalmente se almacenan en la carpeta Node_Modules y tienen su configuraciòn en un archivo llamado package.json.

Con el objetivo de ilustrar el proceso para la reutilización de un componente, es necesario crear un proyecto básico con Angular, motivo por el cuál el primer requisito consiste en instalar el Angular-cli:

• Para instalar Angular es necesario tener instalado en tu sistema local NodeJs. Para ello, nos remitimos a la siguiente url : https://nodejs.org/es/ y descargaremos el archivo de instalación.
  
  
• Luego de garantizar la instalación de NodeJS, se debe escribir en la terminal del sistema operativo el siguiente comando:
  
  

npm install -g @angular/cli

Una vez tenemos instalado el angular-cli procedemos con la creación del proyecto:

1. Creación de la estructura base del proyecto:

1.1 Crearemos una librería sencilla que solo tenga un botón y por medio de alert emita un mensaje. Para lograrlo, debemos escribir en la terminal un comando con la siguiente estructura:

ng new demo-demoLibrary --create-application=false

En la figura 1 se puede observar la estructura del proyecto generada por el comando anterior.

Figura 1. Estructura inicial del proyecto.

Una vez generado el proyecto, es necesario ingresar a su carpeta mediante el siguiente comando:

cd demo-demoLibrary

1.2. Estando ubicados en la carpeta del proyecto, procedemos a crear una aplicación en Angular que nos permita utilizar y probar la librería recién creada mediante un comando con la siguiente estructura:

ng generate library <library-name>

Por ejemplo:

ng generate library button-alert

Se espera que esta librería ejecute un mensaje personalizado en el momento de presionar un botón.

El resultado del comando anterior puede visualizarse en la figura 2

Figura 2. Estructura de librería.

1.3. Nos remitimos al proyecto para poder visualizar el archivo angular.json, que contiene su configuración. En este archivo debería estar incluido el nombre de la librería recién creada.

Figura 3. Archivo de configuración de angular

1.4. Procedemos a crear una aplicación en Angular para que desde la app se pueda ingresar al módulo de la librería y continuar con la construcción de la lógica:

ng generate application <name-app>

Por ejemplo:

ng g application demoApp

1.5. Dentro de la carpeta de projects ya podemos apreciar la aplicación. Así mismo, en el archivo angular.json es posible identificar el nombre de la aplicación y el nombre de la librería.

Figura 4. Estructura de la aplicación

Dentro de la estructura de la librería (ver figura 2) podemos identificar que desde ahí contamos con el archivo button-alert.component.ts, que de hecho es el único que utilizaremos para el ejemplo.

1.6 Ingresamos al archivo project/button-alert/src/lib/button-alert.component.ts y cambiamos la plantilla que genera angular por defecto y procedemos a escribir la siguiente lógica:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29

import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'lib-buttonAlert',
      template: `
        <input type="button" class="button" value="Input Button" (click)="alerta()">
      `,
      styles: [
        `.button {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 25px;
    }`
    
      ]
    })
    export class ButtonAlertComponent {
      alerta(): void {
        alert('Hola soy un alert que viene desde una libreria de node');
      }
    }
 

1.7. Para poder utilizar la librería recién creada, es necesario importarla desde un proyecto tipo aplicación que en este caso es demoApp. para lograr esta importación es necesario exportar el módulo mediante el archivo public-api.ts.

Figura 5 estructura de la librería

Se debe tener en cuenta que en el archivo public-api.ts se deben exportar los módulos, componentes, servicios o interfaces que se vayan a utilizar dentro de los import de la app que se vayan a instalar.

Figura 6

Luego procedemos a realizar la importación del módulo de la librería “ButtonAlertModule” para comprobar su funcionamiento.

 
    1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { ButtonAlertModule } from 'projects/button-alert/src/public-api';
   
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       ButtonAlertModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

En el archivo app.component.html que en este caso es el HTML inicial, insertamos el selector de la siguiente manera con el objetivo de renderizar el componente de la librería.

1.8. Ejecutamos el siguiente comando “ng serve” para poder apreciar el resultado que consiste en un botón que con el evento se tiene el siguiente resultado:

2. Proceso de publicación en npm

2.1 Primero debemos deshabilitar el compilador de Ivy en el proyecto de la librería en el archivo tsconfig.lib.ts

  1
  2
  3
  4
  5
  6

"angularCompilerOptions": {
      "skipTemplateCodegen": true,
      "strictMetadataEmit": true,
      "enableResourceInlining": true,
      "enableIvy": false
    },
  

2.2. Luego desde la raíz del proyecto escribimos el comando npm run build seguido del nombre de la librería que se encuentra en el archivo angular.json

npm run build buttonAlert

2.3. Lo siguiente es crear una cuenta en npm.js

2.4. Tras haber compilado el proyecto en el paso 2.2 se debió haber creado una carpeta llamada dist que se encuentra en la raíz del proyecto. Es necesario ingresar a esta carpeta en la consola de comandos para poder ejecutar el siguiente comando:

npm adduser

el cual nos pedirá las credenciales del usuario que creamos en la web npm.js.

Una vez registrado el usuario, procedemos a publicar con el comando:

npm publish

y después de esto puedes contar con la librería para ser instalada en tu proyecto.