Angular 6 – Añadir Bootstrap 4 con JQuery

Recordar lo primero que para utilizar toda la potencia de BootStrap, necesitamos tener instaladas las librerias de JQuery y Popper 

Hay varias maneras de  instalar estas librerías.

  1. Localmente usando npm

Una vez estemos situados el directorio principal del proyecto, desde tu terminal preferido ejecutar las instrucciones siguientes:

npm install  bootstrap@4 jquery popper.js --save

Esto nos instalara los archivos necesarios bajo el directorio node-modules. 

Ahora debemos incluir el fichero de estilos (css) de BootStrap y las librerías JavaScript de BootStrap, JQuery y Pooper.

Una de las opciones es editando el fichero angular.json, e incluirlas en los campos styles y scripts.

El fichero quedaría algo así como esto:

...... CODIGO ANTERIOR ....
"styles": [
"src/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",
"./node_modules/pooper.js/dist/js/pooper.min.js",
]
...... CODIGO POSTERIOR  ....

Recordar que hay que parar el servidor de node.js y volverlo a ejecutar con ng serve si modificamos el fichero angular.json

Otra manera de incluir estos ficheros seria añadirlos en index.html, dentro de HEAD. Esto si fuera un proyecto habitual en HTML.

....
<head>
 <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
 <script src="../node_modules/jquery/dist/jquery.min.js"></script>
 <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
 <script src="../node_modules/pooper.js/dist/js/pooper.min.js"></script>
</head>
....
  1. Usando CDN

En este caso, no bajamos nada locamente y lo que hacemos es incluir los enlaces hacia los correspondientes ficheros en interner.

Así, como explican en la pagina de  BootStrap CDN, añadiríamos esta linea para incluir bootstrap versión 4.1.3

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Y esta linea para incluir JQuery y Pooper

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

¡¡Y a trabajar con BootStrap y crear aplicaciones profesionales!!

1 comentario en “Angular 6 – Añadir Bootstrap 4 con JQuery”

Deja un comentario