Cómo agregar bootstrap a un proyecto angular-cli

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

Después de obtener bootstrap y sus dependencias con npm, nuestro primer enfoque consistió en agregarlas 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

      

Esto funcionó bien con ng serve pero tan pronto como produjimos una construcción con el indicador -prod todas estas dependencias desaparecieron de dist/vendor (¡sorpresa!).

¿Cómo se pretende manejar ese escenario (es decir, cargar secuencias de comandos bootstrap) en un proyecto generado con angular-cli?

Tuvimos las siguientes ideas pero realmente no sabemos qué camino tomar …

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

  • copiar dependencias a dist/vendor después de nuestra ng build -prod ? Pero parece que algo angular-cli debería proporcionar, ya que ‘cuida’ la parte de comstackción.

  • agregando jquery, bootstrap y tether en src / system-config.ts y de alguna manera los inserta en nuestro paquete en main.ts? Pero eso parecía equivocado teniendo en cuenta que no vamos a utilizarlos 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 admite Angular 3 y 4.

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

En primer lugar, compruebe 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 admite ambas versiones.

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

     import { AlertModule } from 'ngx-bootstrap'; ... @NgModule({ ... imports: [AlertModule.forRoot(), ... ], ... }) 
  2. Abra angular-cli.json e inserte una nueva entrada en la matriz de styles :

     "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
  3. Abra src / app / app.component.html y agregue:

     hello 

1.0.0-beta.10 o versiones inferiores:

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

Primero, ve al directorio del proyecto y escribe:

 npm install ngx-bootstrap --save 

Luego, abre tu angular-cli-build.js y agrega 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' } }; 

Buscar la palabra clave> Instalación de biblioteca global en https://github.com/angular/angular-cli te ayuda a encontrar la respuesta.

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

Primero instala Bootstrap desde npm:

 npm install bootstrap@next 

A continuación, 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 Bootstrap CSS 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 reinicias 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.

Luego vaya a su src/style.scss o src/style.css (elija el que esté usando) e importe 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, igual tendrá que agregar el archivo en el archivo angular-cli.json como lo hizo ( En la versión angular 6, esta edición debe hacerse 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, tienes que 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 de 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" ] 

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)

  

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.

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

Incluir Bootstrap

Bootstrap es un marco CSS popular que se puede usar dentro de un proyecto angular. Esta guía lo guiará para agregar bootstrap a su proyecto Angular CLI y configurarlo para usar bootstrap.

Usando CSS

Empezando

Crea un nuevo proyecto y navega en el proyecto

 ng new my-app cd my-app 

Instalando Bootstrap

Con el nuevo proyecto creado y listo, necesitará instalar el bootstrap en su proyecto como una dependencia. Usando la opción --save , 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 estar configurado para incluir el bootstrap CSS.

  • Abra el archivo .angular-cli.json desde la raíz de su proyecto.
  • En las apps propiedad, el primer elemento de esa matriz es la aplicación predeterminada.
  • Hay styles propiedad que permiten aplicar estilos globales externos a su aplicación.
  • Especifique la ruta a bootstrap.min.css

Debería verse como el siguiente cuando haya terminado:

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

Nota: Cuando realice cambios en .angular-cli.json , deberá volver a iniciar ng serve para recoger los cambios de configuración.

Proyecto de prueba

Abra app.component.html y agregue el siguiente marcado:

  

Con la aplicación configurada, ejecute ng serve para 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 de arranque.

Usando SASS

Empezando

Crea un nuevo proyecto y navega en el proyecto

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

Instalando Bootstrap

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

Configurando Proyecto

Cree un archivo vacío _variables.scss en src/ .

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

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

En styles.scss agregue 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.html y agregue el siguiente marcado:

  

Con la aplicación configurada, ejecute ng serve para 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 de arranque. Para asegurarse de que sus variables se usan, abra _variables.scss y agregue lo siguiente:

 $brand-primary: red; 

Regrese el navegador para ver el color de la fuente cambiado.

Supongo que los métodos anteriores han cambiado después del lanzamiento, revisa 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 todas las obras agregando

 hello 

Como esto se volvió tan confuso y las respuestas aquí están totalmente mezcladas, solo sugiero ir con el equipo oficial de ui para el repository BS4 (sí, hay tantos repositorys para NG-Bootstrap.

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

Citando de la lib:

Esta biblioteca está siendo construida desde cero por el equipo de ui-bootstrap. Estamos utilizando TypeScript y apuntando al marco CSS de 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í.

Solo copie pegar lo que está allí por el bien de eso:

 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 cual 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 pueden simplemente 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 de lejos

Pasos para Bootstrap 4 en Angular 5

  1. Crear Proyecto Angular 5

    ng nuevo AngularBootstrapTest

  2. Mover al directorio del proyecto

    cd AngularBootstrapTest

  3. Descargar bootstrap

    npm instala bootstrap

  4. Agregue Bootstrap al proyecto

    4.1 abrir .angular-cli.json

    4.2 encuentra la sección de “estilos” en el json

    4.3 agregue la ruta bootstrap css 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

  1. abre src/app/app.component.html
  2. agregar el componente del botón de arranque

.

  

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

  1. guarda el archivo

  2. ejecutar el proyecto

    ng serve –open

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

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

Haga los siguientes pasos:

  1. npm install --save bootstrap

  2. Y en tu sección .angular-cli.json, agrega a los estilos:

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

Después de eso, debe reiniciar su servicio ng

Disfrutar

  1. Instalar bootstrap

      npm install bootstrap@next 

2.Agregar 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" ], 
  1. Último agrega bootstrap.css a tu código style.scss

     @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; 
  2. Reinicia tu servidor local

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

  1. Ejecutar en bash npm install ng2-bootstrap bootstrap --save
  2. Agregue / Cambie 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" ],

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

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

ng-bootstrap reemplaza por completo la implementación de JavaScript para los componentes. Por lo tanto, no necesita incluir bootstrap.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 angular-cli.

  • Inculde bootstrap.min.css en su sección de estilos .angular-cli.json.

     "styles": [ "styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
  • Instalar 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) módulo (s) secundario (s) si va a usar componentes ng-bootstrap dentro de esas clases de módulo.

     import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [NgbModule, ...], }) 
  • Ahora su proyecto está listo para usar los componentes ng-bootstrap disponibles.

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

 npm install --save bootstrap 

A continuación, abra el archivo .angular-cli.json, busque

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

cambiar eso a

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

Todo listo.

angular-cli ahora tiene una página wiki dedicada donde puedes encontrar todo lo que necesitas. TLDR, instala bootstrap través de npm y agrega el enlace de estilos a la sección de “estilos” en tu archivo .angular-cli.json

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

1.install bootstrap

npm instalar bootstrap tether jquery –save

2.añadir 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 verifica tu carpeta node_modules para el archivo boostrap.css (dentro de dist) normalmente la ruta es

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

agregar 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.

  1. Instalar bootstrap, popper.js

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

  1. En src / styles.css , importe el estilo de arranque

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

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.

Para obtener más información acerca de los esquemas de arranque, consulte aquí .

  1. Instalar Bootstrap usando npm

     npm install bootstrap 

2. Instalar Popper.js

 npm install --save popper.js 

3. Gira angular.json en Angular 6 project / .angular-cli.json en Angular 5 y agrega los listados:

  "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" ] 

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 está instalado con éxito. Sin embargo, para usarlo, debe actualizar la matriz “styles” en el archivo angular.json.

Actualízalo 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 eres bueno para usar boostrap. enter image description here

Instale bootstrap usando npm i --save bootstrap@version . Ahora vaya a la carpeta nodemodules y desde la carpeta bootstrap copie la ruta de ‘bootstrap.min.css.js’ y pegue la ruta completa (como nodemodules/bootstrap/css/bootstrap.min.css.js ) en angular.json bajo script tag file y vuelva a ejecutar el servidor y para verificar si la instalación es exitosa ejecuta el progtwig en cualquier navegador que desees y presiona F12 encontrarás que se abre una parte de la ventana , ahora vaya a la pestaña de elementos abrir etiqueta de encabezado y si ve la etiqueta de arranque en estilo, su instalación será exitosa.