Creación de una biblioteca personalizada con Angular

Creación de una biblioteca personalizada

Para empezar, primero tendremos que crear un nuevo proyecto usando el CLI.

En este punto deberíamos estar bien. A partir de aquí, sin embargo, tenemos que utilizar un comando que el CLI proporciona en Angular 6 o superior, que es ng generate. Este ng generate está diseñado para crear una biblioteca compartida personalizada. Luego, dándole un nombre a tu librería, se añadirá a un proyecto separado, que se llama workspace.

Cuando haces ng new obtienes un workspace con un proyecto en él, que es tu proyecto web. Este ng generate añadirá una segunda versión en el espacio de trabajo para que podamos probar nuestra biblioteca en la aplicación Angular sin publicar en npm o en cualquier otro recurso. Ahora, esto modifica el archivo tsconfig y eso va a ser actualizado para que el proyecto Angular, el separado en el espacio de trabajo, entienda cómo llegar a la biblioteca, la biblioteca compartida que vamos a construir.

Entonces puedes construir tu biblioteca usando el comando ng build y luego darle el nombre de tu proyecto, así:

Puedes usar esto y probarlo directamente en el otro proyecto de Angular que está dentro de tu espacio de trabajo. Por lo tanto, hace que sea muy fácil de hacer esto sin tener que publicar en npm en algún lugar. Después de eso, querríamos publicar en npm una vez que estemos listos, lo hayamos probado y se vea bien, porque queremos ser capaces de tirar de npm, ya sea el npm que está ahí fuera al que cualquiera puede acceder, o si es un npm interno que puedas tener en tu empresa. Queremos tirar de ellos en nuestras diferentes aplicaciones para que podamos obtener la reutilización. Hay un enlace si eres nuevo en contribuir a npm que está ahí fuera.

Necesitamos hacer esto para ir a la carpeta dist y habrá un archivo package.json incluido. Eso se va a utilizar para luego publicar en npm. Sólo tenemos que escribir el siguiente comando:

Así que, ¿deberíamos ver cómo las cosas son diferentes en nuestra solución? Vamos a ☺.

Así que en primer lugar, te darás cuenta de que tenemos una carpeta de proyectos. También tenemos ahora un tsconfig actualizado como se puede ver en la siguiente imagen:

Agregó las rutas a donde en última instancia vamos a estar construyendo nuestra carpeta dist una vez que hacemos una construcción y es por eso que usted tiene que construir en primer lugar, antes de que usted puede hacer esto porque TypeScript es en realidad va a mirar a esto para ser capaz de hacer que todo esto funcione.

Ahora, la otra gran cosa que se ha hecho es nuestro archivo angular.json tiene un nuevo proyecto en él:

Así que, tenemos un proyecto secundario aquí mismo, que es nuestro braga-lib y te darás cuenta de la ruta allí para la raíz del proyecto. Ahora, todo lo demás necesario para construir y probar está incluido. Así que esas son las principales cosas que modifica. Ahora, lo que podemos hacer desde aquí es hacer cambios en nuestra biblioteca. Así que, si entramos, verás archivos normales aquí y una carpeta src y luego lo que añaden es una lib como puedes ver:

La lib va a tener nuestro componente, nuestro módulo e incluso un servicio si lo quieres. Si abres el archivo del componente, prácticamente sólo dice «¡funciona braga-lib!».

Ahora observa el selector «lib-braga-lib». Puedes cambiar esto, pero ahora mismo vamos a dejarlo como está y vamos a usarlo en nuestro proyecto Angular. Vamos a echar un vistazo a eso? Oh sí ☺