Incluir librerías externas en Angular

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 🙂

Victor

Autor: Victor

Desarrollador web - Formador online - Blogger

Compartir este post

Poner un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *