Bibliotecas de Angular

Las bibliotecas de Angular se construyen como una solución de problemas generales tales como la presentación de una interfaz de usuario unificada, la presentación de datos, y permitir la entrada de datos. Los desarrolladores pueden crear soluciones generales para dominios particulares que pueden ser adaptados para su reutilización en diferentes apps. Estas soluciones pueden ser construidas como librerías Angular y estas librerías pueden ser publicadas y compartidas como paquetes npm.

Una librería Angular es un proyecto Angular pero es diferente de la app Angular en los términos que no puede correr por sí misma. Se importa y se utiliza en la app.

Uso de las bibliotecas de Angular

• Las bibliotecas de Angular amplían las funcionalidades base de Angular. Por ejemplo, si quieres añadir formularios reactivos a una app, añade el paquete de librerías usando ng add @angular/forms, y luego importa el ReactiveFormsModule de la librería @angular/forms en el código de tu aplicación.
• Angular Material es un ejemplo de una gran biblioteca de propósito general que proporciona componentes de interfaz de usuario sofisticados, reutilizables y adaptables.

Instalación de bibliotecas

Las bibliotecas se publican como paquetes npm y se integran con Angular CLI. Para integrar el código de la biblioteca reutilizable en una aplicación, tenemos que instalar el paquete e importar la funcionalidad proporcionada donde la utilizaremos.

Sintaxis

El comando ng add utiliza el gestor de paquetes npm para instalar el paquete de librerías, e invoca los esquemas que se incluyen en el paquete a otros andamios dentro del código del proyecto, como añadir sentencias import, fuentes, temas, etc.

Tipificación de la biblioteca

Los paquetes de la biblioteca incluyen tipificaciones en archivos .d.ts. Si el paquete de su biblioteca no incluye tipados y el IDE muestra un error, tiene que instalar el paquete @types/ asociado a la biblioteca.

Por ejemplo, suponga que tiene una biblioteca llamada d1:

Los tipos definidos en un paquete @types/ para una biblioteca instalada en el espacio de trabajo se añaden automáticamente a la configuración de TypeScript para el proyecto que utiliza esa biblioteca. TypeScript busca tipos en la carpeta node_modules/@types de forma predeterminada, por lo que no tiene que añadir cada paquete de tipos individualmente.

Si una biblioteca no contiene tipos en @types/, todavía puede utilizarla añadiendo manualmente tipos para ella. Puede hacerlo de la siguiente manera:

Cree un archivo typings.d.ts en su carpeta src/. Este archivo se incluye automáticamente como definición de tipo global.

Agrega el siguiente código en src/typings.d.ts.

Agrega el siguiente código en el componente o archivo que utiliza la biblioteca:

Actualización de bibliotecas

Puedes actualizar las bibliotecas mediante el comando ng update. Actualiza las versiones individuales de las bibliotecas. La CLI de Angular comprueba la última versión publicada de la biblioteca, y si encuentra que la última versión es más reciente que tu versión instalada, la descarga y actualiza tu package.json para que coincida con la última versión.

Sintaxis

Nota: Cuando actualizas Angular a una nueva versión, debes asegurarte de que cualquier librería que estés usando esté actualizada. Si las bibliotecas tienen interdependencias, también deben ser actualizadas.

Cómo añadir una biblioteca al ámbito global de tiempo de ejecución

Las bibliotecas JavaScript de Legacy que no se importan en una app pueden añadirse al ámbito global de tiempo de ejecución y cargarse como si estuvieran en una etiqueta de script. Hay que configurar la CLI para que haga esto en tiempo de compilación utilizando las opciones «scripts» y «styles» del objetivo de compilación en el archivo de configuración de la CLI, angular.json.

Por ejemplo, para usar la librería Bootstrap 4, primero hay que instalar la librería y sus dependencias usando el gestor de paquetes npm:

Agrega el archivo CSS de Bootstrap a la matriz «styles»:

Creación de nuevas bibliotecas

Puedes crear y publicar tus propias bibliotecas nuevas para extender las funcionalidades de Angular. Generalmente se utiliza cuando necesitas resolver el mismo problema en más de una app (o quieres compartir tu solución con otros desarrolladores), tienes un candidato para una librería.

Por ejemplo: Puedes crear un botón que envíe a los usuarios a la web de tu empresa y que se incluya en todas las apps que tu empresa construya.

Abre Angular CLI y utiliza la siguiente sintaxis para crear una nueva librería.

Sintaxis

Esto creará una carpeta projects/my-lib en tu workspace, que contiene un componente y un servicio dentro de un NgModule. El archivo de configuración del espacio de trabajo, angular.json, se actualiza con un proyecto de tipo ‘library’.

Ahora, puedes construir, probar y hacer lint a tu proyecto usando los siguientes comandos: