Angular 6 – Añadir Bootstrap 4 con JQuery September 20, 2018

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

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

Y esta linea para incluir JQuery y Pooper

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

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