Hoy aprenderemos a incluir librerías externas en Angular. Si alguna vez has querido ver como cargar librerías de javascript, como cargar Bootstrap y jQuery dentro de Angular, eso es lo que vamos a aprender.
Lo primero que debemos hacer es añadir las librerías que necesitemos a las dependencias del fichero package.json de nuestro proyecto, en mi caso jQuery y Bootstrap:
"dependencies": {
// OTRAS MUCHAS DEPENDENCIAS Y AL FINAL AÑADO LAS MIAS
"bootstrap": "3.3.6",
"jquery": "1.12",
},
Una vez que hemos añadido los paquetes en el package.json debemos modificar el archivo src/.angular-cli.json para incluir en la configuración de Angular CLI/Webpack la carga de los ficheros de estilos y los diferentes scripts:
"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],
Esta configuración hace que las librerías se incluyan en la compilación y en los builds de Angular CLI, aparte tambien incluye los estilos y scripts en el index.html del proyecto.
Por último, si nuestra libreria tiene variables u objetos que necesitamos utilizar de manera programática en los componentes de la webapp de Angular, debemos añadir unas lineas de código al fichero typings.d.ts para declarar las variables necesarias y que Angular no las detecte como desconocidas.
En mi caso con jQuery tengo que hacerlo:
/* SystemJS module definition */
// Declaro las variables de jQuery
declare var jQuery:any;
declare var $:any;
declare var module: NodeModule;
interface NodeModule {
id: string;
}
Pues con esto ya podemos usar Bootstrap y jQuery en cualquier parte de nuestra aplicación web de Angular y podriamos seguir el mismo procedimiento para cualquier otro paquete. Por tanto ya sabemos como incluir y cargar librerías externas en Angular 5 🙂
