En este post se explicará como configurar bootstrap en una aplicación de Angular 4, para esto se tomará como base la aplicación creada en el post Introducción a Angular JS en español.

Paso 1 : Ir al folder del proyecto

El primer paso es, haciendo uso de la linea de comandos posicionarse en el directorio que contiene nuestro proyecto de angular:

cd angular-js-example

Y ejecutar el siguiente comando :

npm install --save bootstrap

Una vez que el comando termina de ejecutarse, bootstrap estará disponible en el folder ../node_modules/bootstrap/dist/css/bootstrap.min.css .

Paso 2: Incluir el css en Angular

Para hacer esto el siguiente paso es editar el archivo angular-cli.json e incluir en el arreglo de styles el css de bootstrap:

 "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]

Paso 3: Probar todo junto

El tercer y último paso es probar todo junto, para esto simplemente ejecutaremos de nuevo nuestro servidor de angular utilizando el comando:

ng serve

Con esto tu aplicación tendrá soporte para bootstrap y ya serás capaz de usarlo en cualquier parte de tu aplicación.

Autor: Alejandro Agapito Bautista

Twitter: @raidentrance

Contacto:raidentrance@gmail.com