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í:
Creación proyecto biblioteca
Abrimos una terminal y escribimos lo siguiente:
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).
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:
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:
Para ejecutar ese comando, escribimos en la terminal:
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:
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:
¡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:
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:
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.
Te dejo el repositorio de ejemplo de este tutorial.
https://github.com/DiscoDurodeRoer/example-library-angular
Te dejo un video explicando el tema.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta