Configurando e implementando Bootstrap en nuestro proyecto

En versiones actuales al día de hoy NO se encuentra como .angular-cli.json esta como angular.json y la linea se agrega es sin los dos puntos es directo asi:
“node_modules/bootstrap/dist/css/bootstrap.min.css”

Mi estructura de directorios no tiene el archivo .angular-cli.json sin embrago si tiene angular.json fuera de src. Ahí añadí la referencia al archivo css:

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

En las versiones mas recientes se llama “angular.json” no .angular-cli.json

¿no es un poco contradictorio usar angular (que es javascript casi puro) y bootstrap como su framework de estilos sabiendo que muchas de sus funcionalidades dependen de jquery, caso puntual el navbar-collapse del navbar para hacer el que el menú tipo ‘hamburguesa’ se expanda o no en una vista móvil?

Amigos en archivo angular.js raiz del proyecto, solo adjuntar bootstrap de la siguiente manera evitar el “…/”, aparece un error en la búsqueda del archivo

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

Por acá dejo un link bastante bueno que explica Angular Material para los interesados. Aunque esta en inglés y es un poco largo, merece la pena.
https://www.youtube.com/watch?v=jUfEn032IL8&t=0s

como ya mencionaron ahora el archivo .agular-cli ahora se encuentra como angular.json
y tambien igualmente si instalan la ultima version de boostrap no funcionara el navbar con las clases ya que cambiaron aqui dejo el codigo con las clases actualizadas para el menu 😃

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">PlatziSqueare</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Inicio <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contacto</a>
      </li>
    </ul>
  </div>
</nav>

https://www.c-sharpcorner.com/article/how-to-install-jquery-popper-and-bootstrap-in-angular/

Y problemas solucionados…

Otra forma de importar bootstrap es en el archivo styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';

buenas clases

Despues de instalar las librerias de bootstrap con (npm install bootstrap). En mi carpeta css no sale un archivo bootstrap.min.css, solo sale los que hay a continuación, cual de ellos debo llamar desde angular_cli.json?
Gracias por su respuesta.

(

Si se encuentran en Angular 6 , el archivo se llama simplemente:
“angular.json”

Para los que tengan problemas con el navbar de bootstrap en versiones actuales de angular (yo estoy en la 7) yo lo hice de esta manera:

-instale bootstrap: npm install bootstrap --save
-instale ngx bootstrap: npm install ngx-bootstrap --save
-instalar los scripts manuales que pide, popper y jquery:** npm install popper.js jquery**
-agregar los scripts y css en el archivo angular.json: (en ese orden)

"styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
"scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Chicos no se compliquen, si no les anda el “…/node_modules…” pongan sin los dos puntos y la barra, es decir saquen el “…/” que solo les quede asi "node_modelues/etc etc etc"
saludos!

POR ALGUN MOTIVO NO ME MODIFICA EN NADA LA PAGINA PONER EL CODIGO NVAR. ALGUIEN ME AYUDA???

Las ultimas versiones de Bootstrap están mejor.

Excelente clase. Implementando bootstrap.

Cuando instale el bootstrap me salió:

npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected]^1.14.7 but none is installed. You must install peer dependencies yourself.

Yo lo hice utilizando Angular Material, y si bien hay que escribir un poco más de estilos, me ha parecido bastante agradable esta libreria.
Por acá dejo mi código:
https://github.com/shiroukamui/curso-angular-4/tree/Configurando-Implementando-Angular-Material-en-Proyecto

Por acá dejo mi código en GitHub para el que lo quiera revisar.
https://github.com/shiroukamui/curso-angular-4/tree/Configurando-Implementando-Angular-Material-en-Proyecto
Yo lo hice con Angular Material. De modo que es necesario primero instalarlo y reiniciar el server para que funcione.
Más info: https://material.angular.io/guide/getting-started

Por si les aparece un error al modificar el archivo angular-cli.json/angular.js en
las versiones mas nuevas de bootstrap, vsc en la parte de styles, yo lo agregue asi:

“styles”: [
{
“input”: “./node_modules/bootstrap/dist/css/bootstrap.min.css”
},
“src/styles.css”
],