Crear biblioteca Angular

por

Hoy vamos a crear una nueva biblioteca reutilizable. Si te encuentras creando el mismo componente en más de una app (o quieres compartir tu componente con otros desarrolladores), necesitas una librería.

Crea el proyecto

Usaremos angular cli para generar el esqueleto de la librería. Si no tienes instalado angular cli, consulta la guía de instalación de angular cli.

Los siguientes comandos generarán el proyecto angular my-project y la librería my-lib

ng new my-projectcd my-projectng generate library my-lib
Entrar en modo de pantalla completa Salir del modo de pantalla completa

Esto crea projects/my-lib en la carpeta my-project, que contiene
my-lib.component.ts y my-lib.service.ts. Angular cli también creó el archivo public-api.ts en la carpeta my-lib. Este archivo contiene las siguientes líneas de código,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Este archivo define lo que está disponible para los usuarios de la biblioteca (A.K.A API pública).

Si abres my-lib.component.ts, verás el siguiente código:

import { Component, OnInit } from '@angular/core';@Component({ selector: 'lib-my-lib', template: `<p>my-lib works!</p>`, styles: })export class MyLibComponent implements OnInit { constructor() { } ngOnInit(): void {}}
Entrar en modo de pantalla completa Salir del modo de pantalla completa

Esta simple salida de la librería my-lib works! y usaremos el selector,
<lib-my-lib></lib-my-lib> para consumir el componente.

Instalar la librería como dependencia de npm.

Para utilizar cualquier librería en angular, es necesario instalarla desde el gestor de paquetes como npm. En este ejemplo no publicaremos nuestra librería en el gestor de paquetes npm. Si quieres aprender sobre cómo publicar la biblioteca de angular, consulta la guía de angular.

Ahora instalaremos my-lib como dependencia de npm desde el archivo. Abrir package.json y añadir "my-lib": "file:projects/my-lib" en el bloque de dependencias, Ver el fragmento de código a continuación.

 "dependencies": { ... "@angular/router": "~9.1.4", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2", "my-lib": "file:projects/my-lib" }
Entrar en el modo de pantalla completa Salir del modo de pantalla completa

my-lib es el nombre del paquete que verá en la carpeta node_modules y file:projects/my-lib es la biblioteca real. Si hubiéramos publicado nuestra biblioteca en npm, sustituiríamos file:projects/my-lib por el número de versión(0.0.1).

Si ejecutas npm install, verás que my-lib se ha añadido a la carpeta node_modules. Ahora podemos importar y utilizar la biblioteca en nuestro proyecto. ver fragmento de código a continuación:

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }
Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Ahora que hemos importado el módulo de la biblioteca en nuestro proyecto, podemos utilizar MyLibComponent. Abre app.component.html y sustituye todo el código por
<lib-my-lib></lib-my-lib>.

Ejecuta la aplicación

Ejecuta npm start o ng serve para iniciar la aplicación. Abre el navegador y visita http://localhost:4200, verás que se muestra my-lib works!.

¡Felicidades has creado con éxito la librería angular!

Código disponible en github

Deja un comentario