iniciar proyecto de angular 5 con bootstrap 4

Como dijo Jack: “Vamos por partes”, primero instalemos el angular-cli si aun no lo tenemos

Creamos un nuevo proyecto

Luego instalamos bootstrap 4 y sus dependencias

Ahora vamos a decirle a angular que las jale desde el archivo .angular-cli.json ubicado en la carpeta raiz ( ./angular-cli.json) y agregar estas lineas, OJO: los scripts tienen que estar en este orden o la consola de chrome te devolverá un error:

Ahora para comprobar que lo hemos hecho correctamente levantemos el servidos usando

Veremos la diferencia de estilos y podemos comprobarlo

, ,

4 thoughts on “iniciar proyecto de angular 5 con bootstrap 4

  1. ¡Hola! Muchas gracias por este aporte tan bien explicado. Una única duda: ¿No haría falta importar popper en el app.module.ts del siguiente modo?

    import { NgxPopper } from ‘angular-popper’;
    @NgModule({
    imports: [ NgxPopper ]
    })

  2. Me molesta cuando enseñan a través de una plataforma web.. y asumen que tooooooooooooooodos los lectores están al mismo nivel, si fuera así para que busco o leo un tutorial de otro.. simplemente me doy la joda de partir con los manuales o bien Pongamos id de niveles entonces, en cada lección o tutorial que se publique se entienda que en esta lección se ASUME QUE TODOS SABEN HASTA AQUÍ…. así me queda claro que debo seguir documentandome hasta llegar a este nivel… osa los que están comenzando esto no les sirve.. a los que estan medio medio.. tampoco.. y así…. siendo así ni pierdo tiempo publicando estas lineas…

    “Ahora vamos a decirle a angular que las jale desde el archivo .angular-cli.json”???? donde modificar este archivo.. como lo llamó?, a través del mismo angular?… ruta de donde se encuentra??…

    1. Hola que tal, agradezco mucho tus comentarios, creo que tienes razón, hasta a mi me sirve mucho mas cuando veo donde tengo que encontrar esos archivos, tomaré muy en cuenta tus comentarios.

      Saludos.

Deja un comentario

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.