Crea tu propia biblioteca de componentes en Angular

26/06/20230 comentarios

Hola a todos, hoy os voy a explicar como podemos crear nuestra propia biblioteca de componentes usando Angular.

Una biblioteca de componentes es un conjunto de componentes, pipes, servicios, directivas que podemos reutilizar y compartir con el resto.

Es muy útil para la creación de productos, ya que puedes crear una estructura básica y reutilizar todo lo ya hecho.

En este proyecto podemos hacer incluso documentación para ayudar al resto a entender que hemos hecho.

Algunos ejemplos de bibliotecas:

Primeng
Angular material
Biblioteca DDR (hecha en el curso de udemy)

Creación proyecto Angular

Lo primero es crear un proyecto Angular, sino sabes como se hace, te dejo un tutorial aquí:

Crear y ejecutar un proyecto angular

Creación proyecto biblioteca

Abrimos una terminal y escribimos lo siguiente:

ng generate library ddr-test-library --prefix=ddr-test

1	ng generate library ddr-test-library --prefix=ddr-test

Cambia ddr-test-library por el nombre que prefieras.

En el prefijo, ponle el que tu prefieras, es el prefijo que tendrán tus componentes.

Verás una nueva carpeta llamada projects con el nombre que hemos puesto antes. Veamos algunas partes importantes:

Carpeta lib: carpeta donde se almacena todos los elementos de nuestra biblioteca, puedes tener un modulo general para exportar el resto de modulos.
public-api.ts: este fichero indica que queremos exportar hacia afuera, esto es importante si queremos que se utilice algun elemento cuando publiquemos nuestra bibilioteca.
ng-package.json: opciones para compilar nuestra biblioteca.
package.json: es importante por la versión que debemos cambiar cada vez que publiquemos.

De inicio, tendremos un componente creado por defecto.

En este caso, voy a cambiar el selector de este componente de la biblioteca.

Arrancar biblioteca Angular

Para testear y probar nuestra biblioteca, vamos a añadir el siguiente script en el fichero package.json (no el que esta en projects).

"start-library": "npm link ./projects/ddr-test-library/ && ng serve --watch"

1	"start-library": "npm link ./projects/ddr-test-library/ && ng serve --watch"

npm link

enlaza nuestra biblioteca para detectar cambios, es importante importar los elementos de la biblioteca en app.module.

Para ejecutar ese comando, escribimos en la terminal:

npm run start-library

1	npm run start-library

Compilación de biblioteca Angular

Cuando tengamos todo preparado para publicar, tenemos que compilar nuestra biblioteca.

De nuevo, añadimos otro script en el package.json:

"build-library": "ng build ddr-test-library"

1	"build-library": "ng build ddr-test-library"

Para ejecutar ese comando, escribimos en la terminal:

npm run build-library

1	npm run build-library

Se creará la carpeta dist con nuestra biblioteca compilada.

Publicación biblioteca

Con nuestra biblioteca ya testeada y compilada, es hora de publicar para que el resto de personas lo puedan utilizar.

Antes, necesitamos tener una cuenta en npmjs.

Una vez tengas tu cuenta, abre la terminal y escribe:

npm login

npm login

Te aparecerá una ventana de npmjs indicándote que te logues.

Cuando te logues, si vuelves a la terminal, se indica que estarás logueado.

Como ya estamos logueados en npmjs, podemos ejecutar el siguiente comando:

npm publish dist/ddr-test-library

1	npm publish dist/ddr-test-library

¡Importante! Si vuelves a publicar una segunda vez, debes cambiar la version del package.json de la carpeta projects, sino lo haces te dará un error al publicar.

En tu cuenta de npmjs, puedes ver tu biblioteca ya subida.

Testeando nuestra biblioteca Angular en otro proyecto

Llega el momento esperado, probar nuestra biblioteca en otro proyecto.

Creamos otro proyecto como hicimos al inicio de este tutorial.

Instalamos nuestra dependencia:

npm i ddr-test-library

1	npm i ddr-test-library

Importamos el modulo DdrTestModule en el fichero app.module.

En el fichero app.component.html, escribimos el selector del componente de nuestra biblioteca.

<ddr-test-library></ddr-test-library>

Arrancamos el proyecto con el siguiente comando:

npm start

npm start

Este es el resultado:

Si estas interesado en profundizar sobre este tema de bibliotecas en angular, tienes mi curso de udemy de como realizar una biblioteca completa en Angular.

[ufwp id=»2167310″]

Te dejo el repositorio de ejemplo de este tutorial.

https://github.com/DiscoDurodeRoer/example-library-angular

Te dejo un video explicando el tema.