• Skip to main content
  • Skip to header right navigation
  • Skip to site footer

Antonio Pérez

Full Stack developer

  • Home
  • Sobre mi
  • Podcast
  • Blog
  • Contacto
desarrollo full stack

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

You are here: Home / Angular 5 / Como instalar Bootstrap 4 en tu nuevo proyecto de angular 5 (o 4)
05/12/2017 by apcano1978
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!!

Categoría: Angular 2+, Angular 5, Bootstrap, Desarrollo Front End, Desarrollo web, Uncategorized

About apcano1978

Intento nadar entre frameworks, IDEs, SDKs… Algunos lo llaman Full stack developer, yo creo que es solo un eufemismo para decir «el que está en medio de todos los follones» Ruby on Rails y Angular … y bastante tengo …

Previous Post:Como importar mi base de datos MySql mediante el terminal
Next Post:Como crear un CRUD básico con Ruby on Rails

Reader Interactions

Comments

  1. Aleix

    05/04/2018 at 9:13 pm

    Muy buenas,
    Perfecto y muy sencillo. Solo un par de detalles que podrías comentar:
    1. En cuanto instalas bootstrap, te pide por defecto que instales popper.js y jquery. Pero al instalar el ng-bootstrap ya te vienen incluidos allí con lo que no se tienen que instalar(si no son estrictamente necesarios).
    2. En los dos snippets de instalación tienes un error en el save. En caso de usar save, tendría que ser –save, o en caso de querer usar solo 1, tendría que ser -S.

    Un saludo.

    Responder
    • Antonio Pérez

      24/05/2018 at 7:24 pm

      Efectivamente, así es como lo hacemos, aunque ultimamente estamos trabajando con ngx-bootstrap para evitar el jquery, jeje. En cuanto al – save, el editor me ha borrado uno igual que a ti, eso ha sido cosa de wordpress y llevo intentando cambiarlo algún tiempo 😉

      Responder
  2. Luis

    02/08/2018 at 3:55 am

    Hola, seguí sus pasos y al ejecutar me dio este error.
    ERROR in ./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)
    Module build failed: Error: Can’t resolve ‘../node_modules/bootstrap/scss/bootstrap’ in ‘C:\Users\miUser\Documents\PROYECTOS_SOFTWARE\AngularBoot\src’
    Continua la lista de errores pero solo muestro este para no extender.
    si pudiera ayudarme,
    Gracias.

    Responder
    • Antonio Pérez

      20/08/2018 at 10:24 am

      Hola Luis,

      Has mirado en el archivo angular-cli.json? Parece que hubiera algún error entre la utilización de styles.css o styles.scss, revisa cual de ellos estás usando y cual de ellos aparece en el archivo que te he indicado. Además, parece que hay algo con la instalación de bootstrap, parece que tiene algo que ver también con la utilización de scss en lugar de css, ten cuidado con ésto, seguramente no tendras esta parte bien configurada.

      Espero haber sido de ayuda.

      Saludos

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ahora también en youtube

Ve al canal

Copyright © 2023 · Antonio Pérez · All Rights Reserved · Powered by Mai Theme