Como instalar Bootstrap 4 en tu nuevo proyecto de angular 5 (o 4)

Actualizado 26/11/2018.-

He cambiado los comandos ya que la versión de bootstrap se había quedado en la beta 2, ahora los comandos que aparecen son ya de la última versión estable de bootstrap.

Hoy vamos a hacer algo que se suele hacer con frecuencia cada vez que creamos un proyecto nuevo de Angular, instalar bootstrap, en este caso vamos a instalar bootstrap 4. Pero vamos a hacerlo un poco más sencillo, vamos a utilizar una librería que nos permitirá quitarnos todo el rollo de tener que instalar dependencias javascript y demás, vamos a usar ng-bootstrap.

Instalación de bootstrap 4

Vamos a suponer que tenéis un proyecto de angular limpito y recién creado, vamos a partir de ahí, en primer lugar vamos a instalar la última versión estable de Bootstrap, en esta fecha, Diciembre de 2017 la beta 2 de Bootstrap 4, para ello, en la consola tecleamos:

npm install bootstrap --save

yo, en mi caso suelo extender un poco más dado que uso la sintaxis .scss mi comando completo normalmente es:

npm install bootstrap --save --style=scss si en lugar de scss usas sass porque eres un purista y te gusta la adrenalina y vivir al limite, el parámetro que añadirías sería --style=sass

Bien, esto ejecutará la instalación de bootstrap 4, aquí es donde normalmente añadiríamos los scripts de bootstrap, jquery y popper en nuestro .angular-cli.json, pero no lo vamos a hacer ya que no lo necesitamos, genial, verdad?

En lugar de eso tan solo vamos a importar los estilos de bootstrap 4 en nuestro styles.scss, lo cual haremos con la siguiente linea en la primera linea de este archivo:

// styles.scss 

@import "../node_modules/bootstrap/scss/bootstrap";

Instalación de ng-bootstrap

Ng-bootstrap es una librería que nos proporciona algunos componentes para tan solo importarlos en nuestro proyecto y poder utilizarlos, estos que siempre nos traen problemas dado que requieren javascript. Pues bien, aquí los tenéis, listos para ser usados, y además la librería está muy bien documentada, echadle un vistazo a la web de ng-bootstrap, es de lo más interesante.

En realidad, incorporarlo a nuestro proyecto de angular es más que sencillo, una vez que ya tenemos instalado angular y bootstrap 4 solo tenemos que ejecutar el siguiente comando en la consola:

npm install --save @ng-bootstrap/ng-bootstrap

este comando instalará ng-bootstrap en nuestro proyecto de angular, ahora tan solo tenemos que importar el módulo en nuestro archivo app.module.ts de la siguiente manera:

// app.module.ts 

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; // <-- Añadimos esta línea 
import { AppComponent } from './app.component'; 

@NgModule({ 
  declarations: [ AppComponent ], 
  imports: [ 
    BrowserModule, 
    NgbModule.forRoot() // <-- Esta línea también la añadimos 
  ], 
  providers: [], 
  bootstrap: [AppComponent] 
}) 
export class AppModule { }

Y una vez hecho esto, listo, ya tenemos nuestro proyecto preparado para funcionar con Bootstrap 4 y Ng-bootstrap. Ale, a disfrutarlo. Déjame tus comentarios, estaré encantado de leerlos!!