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