Queremos usar bootstrap 4 (4.0.0-alpha.2) en nuestra aplicación generada con angular-cli 1.0.0-beta.5 (con nodo v6.1.0).

Después de obtener bootstrap y sus dependencias con npm, nuestro primer enfoque consistió en agregarlos en angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

e importarlos en nuestro index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Esto funcionó bien, ng servepero tan pronto como produjimos una compilación con -prodbandera, todas estas dependencias desaparecieron dist/vendor(¡sorpresa!).

¿Cómo estamos destinados a manejar tal escenario (es decir, cargar scripts de bootstrap) en un proyecto generado con angular-cli?

Teníamos los siguientes pensamientos, pero realmente no sabemos qué camino tomar ...

• usa un CDN? pero preferimos servir estos archivos para garantizar que estarán disponibles

• copiar dependencias a dist/vendordespués de nuestro ng build -prod? Pero eso parece algo angular-cli debería proporcionar, ya que 'se encarga' de la parte de construcción.

• agregando jquery, bootstrap y src/system-config.tsatado y de alguna manera los incorporamos a nuestro paquete main.ts? Pero eso parecía incorrecto teniendo en cuenta que no los vamos a usar explícitamente en el código de nuestra aplicación (a diferencia de moment.js o algo así como lodash, por ejemplo).

ACTUALIZACIÓN IMPORTANTE: ng2-bootstrap ahora se reemplaza por ngx-bootstrap

ngx-bootstrap es compatible con Angular 3 y 4.

Actualización: 1.0.0-beta.11-webpack o versiones superiores

Antes que nada, verifique su versión angular-cli con el siguiente comando en la terminal:

ng -v

Si su versión angular-cli es mayor que 1.0.0-beta.11-webpack , entonces debe seguir estos pasos:

1. Instale ngx-bootstrap y bootstrap :

   npm install ngx-bootstrap bootstrap --save

Esta línea instala Bootstrap 3 hoy en día, pero puede instalar Bootstrap 4 en el futuro. Tenga en cuenta que ngx-bootstrap es compatible con ambas versiones.

2. Abra src / app / app.module.ts y agregue:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. Abra angular-cli.json (para angular6 y el nombre de archivo posterior cambiado a angular.json ) e inserte una nueva entrada en la stylesmatriz:

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

4. Abra src / app / app.component.html y agregue:

   <alert type="success">hello</alert>

1.0.0-beta.10 o versiones inferiores:

Y, si su versión angular-cli es 1.0.0-beta.10 o inferior, puede usar los pasos a continuación.

Primero, vaya al directorio del proyecto y escriba:

npm install ngx-bootstrap --save

Luego, abra su angular-cli-build.js y agregue esta línea:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Ahora, abra su src / system-config.ts y luego escriba:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...y:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Buscando la palabra clave> Instalación de la Biblioteca Global en https://github.com/angular/angular-cli ayuda a encontrar la respuesta.

Según su documento, puede seguir los siguientes pasos para agregar la biblioteca Bootstrap.

Primero instale Bootstrap desde npm:

npm install bootstrap@next

Luego agregue los archivos de script necesarios a las aplicaciones [0] .scripts en el archivo angular-cli.json:

 "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
    ],

Finalmente agregue el CSS Bootstrap a la matriz de aplicaciones [0] .styles:

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

Reinicie ng serve si lo está ejecutando, y Bootstrap 4 debería estar funcionando en su aplicación.

Esta es la mejor solución. Pero si no reinicia ng serve, nunca funciona. Se recomienda encarecidamente hacer esta última acción.

Haz lo siguiente:

npm i bootstrap@next --save

Esto agregará bootstrap 4 a su proyecto.

A continuación, vaya a su archivo src/style.scsso src/style.css(elija el que esté usando) e importe el bootstrap allí:

Para style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Para style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Para las secuencias de comandos, aún tendrá que agregar el archivo en el archivo angular-cli.json de la siguiente manera ( en la versión angular 6, esta edición debe realizarse en el archivo angular.json ) :

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

Al principio, debes instalar tether, jquery y bootstrap con estos comandos

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

Después de agregar estas líneas en su archivo angular-cli.json (angular.json desde la versión 6 en adelante)

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Como nadie se refirió a la historia oficial (equipo angular-cli) sobre cómo incluir Bootstrap todavía: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Incluir Bootstrap

Oreja es un marco CSS popular que se puede usar dentro de un proyecto angular. Esta guía lo guiará a través de la adición de bootstrap a su proyecto CLI angular y su configuración para usar bootstrap.

Usando CSS

Empezando

Crear un nuevo proyecto y navegar dentro del proyecto.

ng new my-app
cd my-app

Instalar Bootstrap

Con el nuevo proyecto creado y listo, deberá instalar Bootstrap en su proyecto como una dependencia. Usando la --saveopción, la dependencia se guardará en package.json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

Configurando Proyecto

Ahora que el proyecto está configurado, debe configurarse para incluir el CSS de arranque.

• Abra el archivo .angular-cli.jsondesde la raíz de su proyecto.
• Debajo de la propiedad, appsel primer elemento de esa matriz es la aplicación predeterminada.
• Hay una propiedad stylesque permite aplicar estilos globales externos a su aplicación.
• Especifique la ruta a bootstrap.min.css

Debería tener el siguiente aspecto cuando haya terminado:

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

Nota: Cuando realice cambios .angular-cli.json, deberá reiniciar ng servepara recoger los cambios de configuración.

Proyecto de prueba

Abra app.component.htmly agregue el siguiente marcado:

<button class="btn btn-primary">Test Button</button>

Con la aplicación configurada, ejecute ng servepara ejecutar su aplicación en modo de desarrollo. En su navegador navegue a la aplicaciónlocalhost:4200 . Verifique que aparezca el botón de estilo bootstrap.

Usando SASS

Empezando

Crear un nuevo proyecto y navegar dentro del proyecto.

ng new my-app --style=scss
cd my-app

Instalar Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Configurando Proyecto

Crea un archivo vacío _variables.scssen src/.

Si está utilizando bootstrap-sass, agregue lo siguiente a _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

En styles.scssagregar lo siguiente:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Proyecto de prueba

Abra app.component.htmly agregue el siguiente marcado:

<button class="btn btn-primary">Test Button</button>

Con la aplicación configurada, ejecute ng servepara ejecutar su aplicación en modo de desarrollo. En su navegador navegue a la aplicación localhost:4200. Verifique que aparezca el botón de estilo bootstrap. Para asegurarse de que sus variables se usan, abra _variables.scssy agregue lo siguiente:

$brand-primary: red;

Regrese el navegador para ver el color de fuente cambiado.

Actualización v1.0.0-beta.26

Puedes ver en el documento la nueva forma de importar bootstrap aquí

Si aún no funciona, reinicie con el comando ng serve

1.0.0 o versiones inferiores:

En su archivo index.html solo necesita el enlace bootstrap css (no necesita scripts js)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Y

npm install ng2-bootstrap --save
npm install moment --save

Después de haber instalado ng2-bootstrap en my_project / src / system-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

Y en my_project / angular-cli-build.js:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

No olvide este comando para poner su módulo en el proveedor:

ng build

importar desde otro módulo que es el mismo principio.

Supongo que los métodos anteriores han cambiado después del lanzamiento, mira este enlace

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

iniciar proyecto

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

instalar ng-bootstrap y bootstrap

npm install ng2-bootstrap bootstrap --save

abra src / app / app.module.ts y agregue

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

abra angular-cli.json e inserte una nueva entrada en la matriz de estilos

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

abra src / app / app.component.html y pruebe todos los trabajos agregando

<alert type="success">hello</alert>

Pasos para Bootstrap 4 en Angular 5

1. Crear proyecto Angular 5

   ng new AngularBootstrapTest

2. Mover al directorio del proyecto

   cd AngularBootstrapTest

3. Descargar bootstrap

   npm install bootstrap

4. Agregar Bootstrap al proyecto

   4.1 abrir .angular-cli.json

   4.2 encontrar la sección "estilos" en el json

   4.3 agregue la ruta css bootstrap como se muestra a continuación

   .

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

Ahora ha agregado con éxito el bootstrap css en el proyecto angular 5

Prueba de arranque

5. abierto src/app/app.component.html
6. agregar componente de botón de arranque

.

<button type="button" class="btn btn-primary">Primary</button>

Puede consultar los estilos de los botones aquí ( https://getbootstrap.com/docs/4.0/components/buttons/ )

7. guarda el archivo

8. ejecutar el proyecto

   ng servir --abrir

Ahora verá el botón de estilo de arranque en la página

Nota: si agregó la ruta de arranque después de ng serve , debe detener y volver a ejecutar el ng serve para reflejar los cambios

Dado que esto se volvió tan confuso y las respuestas aquí son totalmente mixtas, solo sugeriré ir con el equipo ui oficial para el repositorio BS4 (sí, hay muchos de esos repositorios para NG-Bootstrap.

Simplemente siga las instrucciones aquí https://github.com/ng-bootstrap/ng-bootstrap para obtener BS4.

Citando de la biblioteca:

Esta biblioteca está siendo construida desde cero por el equipo ui-bootstrap. Estamos utilizando TypeScript y apuntamos al marco CSS Bootstrap 4.

Al igual que con Bootstrap 4, esta biblioteca es un trabajo en progreso. Consulte nuestra lista de problemas para ver todas las cosas que estamos implementando. Siéntase libre de hacer comentarios allí.

Simplemente copie y pegue lo que está allí por el bien de esto:

npm install --save @ng-bootstrap/ng-bootstrap

Una vez instalado, debe importar nuestro módulo principal:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

La única parte restante es listar el módulo importado en su módulo de aplicación. El método exacto será ligeramente diferente para el módulo raíz (nivel superior) para el que debe terminar con el código similar a (observe NgbModule.forRoot ()):

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Otros módulos en su aplicación simplemente pueden importar NgbModule:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Este parece ser el comportamiento más consistente por mucho

1. Instalar bootstrap

   npm install bootstrap@next

2. Agregue código a .angular-cli.json:

   "styles": [
     "styles.css",
     "../node_modules/bootstrap/dist/css/bootstrap.css"
   ],
   "scripts": [
     "../node_modules/jquery/dist/jquery.js",
     "../node_modules/tether/dist/js/tether.js",
     "../node_modules/bootstrap/dist/js/bootstrap.js"
   ],

3. Último agregue bootstrap.css a su código style.scss

   @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

4. Reinicia tu servidor local

Haz los siguientes pasos:

1. npm install --save bootstrap

2. Y en su .angular-cli.json, agregue a la sección de estilos:

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

Después de eso, debe reiniciar su ng serve

Disfrutar

1. Instalar Bootstrap usando npm

   npm install bootstrap

2.Instale Popper.js

npm install --save popper.js

3.Vaya a angular.json en Angular 6 project / .angular-cli.json en Angular 5 y agregue lo siguiente:

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

        "scripts": [
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

Prueba esto

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

También puede ver este video de Mike Brocchi que tiene información útil sobre cómo agregar bootstrap a su proyecto generado por Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (alrededor de los minutos 13:00)

1. Correr en bash npm install ng2-bootstrap bootstrap --save
2. Agregar / Cambiar lo siguiente en angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

Abra el Terminal / símbolo del sistema en el directorio del proyecto respectivo y escriba el siguiente comando.

npm install --save bootstrap

Luego abra el archivo .angular-cli.json, busque

"styles": [ "styles.css" ],

cambia eso a

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

Todo listo.

Ahora con la nueva versión ng-bootstrap 1.0.0-beta.5 es compatible con la mayoría de las directivas angulares nativas basadas en el marcado de Bootstrap y CSS.

La única dependencia requerida para trabajar con esto es bootstrap. No es necesario usar las dependencias jquery y popper.js .

ng-bootstrap es reemplazar completamente la implementación de JavaScript para los componentes. Entonces no necesitas incluirbootstrap.min.js en la sección de scripts en su .angular-cli.json.

siga estos pasos cuando esté integrando bootstrap con el proyecto generado con la última versión de angular-cli.

• Introdúcete bootstrap.min.cssen tu .angular-cli.json, sección de estilos.

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

• Instale la dependencia ng-bootstrap .

  npm install --save @ng-bootstrap/ng-bootstrap

• Agregue esto a su clase de módulo principal.

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

• Incluya lo siguiente en la sección de importaciones de su módulo principal.

  @NgModule({
     imports: [NgbModule.forRoot(), ...],
  })

• Haga lo siguiente también en su (s) submódulo (s) si va a usar componentes ng-bootstrap dentro de esas clases de módulos.

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })

• Ahora su proyecto está listo para usar los componentes ng-bootstrap disponibles.

1. Instalar bootstrap, popper.js

npm install --save bootstrap npm install --save popper.js

3. En src / styles.css , importe el estilo de bootstrap

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

Paso 1:
npm install bootstrap@latest --save-dev Esto instalará la última versión del bootstrap, sin embargo, la versión especificada se puede instalar agregando el número de versión

Paso 2: Abra styles.css y agregue lo siguiente @import "~bootstrap/dist/css/bootstrap.css"

Para agregar Bootstrap y Jquery tanto

npm install bootstrap@3 jquery --save

después de ejecutar este comando, continúe y verifique su carpeta node_modules para poder ver bootstrap y jquery agregados.

angular-cliahora tiene una página wiki dedicada donde puedes encontrar todo lo que necesitas. TLDR, instale a bootstraptravés de npmy agregue el enlace de estilos a la sección "estilos" en su .angular-cli.jsonarchivo

Ejemplo de trabajo en caso de utilizar angular-cli y css:

1.instalar bootstrap

npm install bootstrap tether jquery --save

2.añadido a .angular-cli.json

  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

instalar boostrap usando npm

npm install boostrap@next --save

luego revise su carpeta node_modules para el archivo boostrap.css (dentro de dist) normalmente la ruta es

"../node_modules/bootstrap/dist/css/bootstrap.css",

agrega esta ruta | importar boostrap dentro de style.css o style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

Eso es.

Ejecute este siguiente comando dentro del proyecto

npm install --save @bootsrap@4

y si recibes una confirmación como esta

+ bootstrap@4.1.3
updated 1 package in 8.245s

Significa que boostrap 4 se instaló con éxito. Sin embargo, para usarlo, debe actualizar la matriz de "estilos" en el archivo angular.json.

Actualícelo de la siguiente manera para que bootstrap pueda anular los estilos existentes

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

Para asegurarse de que todo esté configurado correctamente, ejecute ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown below, entonces es bueno usar boostrap.

No vi este aquí:

@import 'bootstrap/scss/bootstrap.scss';

Acabo de agregar esta línea en style.scss. En mi caso, también quería anular las variables de bootstrap.

Si acaba de comenzar con angular y bootstrap, la respuesta simple sería los siguientes pasos: 1. Agregue el paquete de nodo de bootstrap como dependencia de desarrollo

npm install --save bootstrap

2. importa la hoja de estilo bootstrap en el archivo angular.json.

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. y está listo para usar bootstrap para estilizar, cuadrícula, etc.

   <div class="container">My first bootstrap div</div>

La mejor parte de esto que encontré fue que estamos dirigiendo el uso de bootstrap sin ninguna dependencia de módulos de terceros. Podemos actualizar bootstrap en cualquier momento simplemente actualizando el comando, npm install --save [email protected]etc.

Tiene muchas formas de agregar Bootstrap 4 en su proyecto Angular :

• Incluyendo los archivos Bootstrap CSS y JavaScript en la sección del archivo index.html de su proyecto Angular con una y etiquetas,

• Importar el archivo CSS Bootstrap en el archivo global styles.css de su proyecto Angular con una palabra clave @import.

• Agregar los archivos Bootstrap CSS y JavaScript en los estilos y las secuencias de comandos del archivo angular.json de su proyecto

Ejecute este comando

npm install bootstrap@3

tu Angular.json

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

puedes instalar bootstrap en angular usando el npm install bootstrapcomando.

y la siguiente ruta de arranque de configuración en angular.jsonarchivo y style.cssarchivo.

puede leer un blog completo sobre cómo instalar y configurar bootstrap en angular, haga clic aquí para leer el blog completo sobre esto

Un ejemplo de trabajo en caso de usar angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Funciona para css y scss. Bootstrap v3 y v4 están disponibles.

Más información acerca de arranque-esquemas favor encuentre aquí .