instalar cli bootstrap twitter-bootstrap angular angular-cli

twitter-bootstrap - cli - install bootstrap angular 6



Cómo agregar bootstrap a un proyecto angular-cli (29)

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

  1. abra src/app/app.component.html
  2. 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/ )

  1. guarda el archivo

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

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 con ng serve pero tan pronto como produjimos una compilación con el indicador -prod , todas estas dependencias desaparecieron de dist/vendor (¡sorpresa!).

¿Cómo estamos destinados a manejar este 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/vendor despué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 tether en src / system-config.ts y de alguna manera los incluimos en nuestro paquete en 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)

  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" ],
  1. Instalar bootstrap, popper.js

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

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

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

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

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

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

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

  2. Reinicia tu servidor local

Abra la 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. 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 de angular-cli.

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

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

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

npm i -S tether npm i -S jquery npm i -S [email protected]

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

Buscar la palabra clave> Instalación de 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.

Como 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 usando TypeScript y apuntamos al framework 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 simple hecho de hacerlo:

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

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

Bootstrap es un marco CSS popular que se puede usar dentro de un proyecto angular. Esta guía lo guiará a través de agregar bootstrap a su proyecto de CLI Angular y configurarlo 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 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 CSS de arranque.

  • Abra el archivo .angular-cli.json desde la raíz de su proyecto.
  • Debajo de las apps propiedad, el primer elemento de esa matriz es la aplicación predeterminada.
  • Hay un estilo de propiedad que 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 en .angular-cli.json , deberá reiniciar ng serve para recoger los cambios de configuración.

Proyecto de prueba

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

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

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

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:

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

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 bootstrap. 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 fuente cambiado.

Ejecute este siguiente comando dentro del proyecto

npm install --save @bootsrap@4

y si recibes una confirmación como esta

+ [email protected] 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.

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

Haz lo siguiente:

npm i bootstrap@next --save

Esto agregará bootstrap 4 a su proyecto.

A continuación, vaya a su src/style.scss o 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" ],

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

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 debajo del archivo de etiqueta de script y vuelva a ejecutar el servidor y para verificar si la instalación se realizó correctamente, ejecute el programa en cualquier navegador que desee y presione F12, verá que se abre una parte de la ventana , ahora vaya a la pestaña de elementos abrir etiqueta de encabezado y si ve bootstrap en la etiqueta de estilo, entonces su instalación es exitosa.

No importa qué marco JS esté utilizando, importar bootstrap a su proyecto es fácil siguiendo los 2 pasos a continuación:

Instale bootstrap usando npm i -S bootstrap o yarn add bootstrap .

En styles.css o styles.scss , importe bootstrap como @import ''~bootstrap/dist/css/bootstrap.min.css'' .

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.

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 el siguiente @import "~bootstrap/dist/css/bootstrap.css"

Simplemente agregue estas tres líneas en la etiqueta Head en index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

github.com/valor-software/ng2-bootstrap/blob/development/docs/…

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>

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 sobre los esquemas de bootstrap, consulte here .

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.

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.

  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:

    <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'' } };

Actualización v1.0.0-beta.26

Puedes ver en el documento la nueva forma de importar bootstrap github.com/valor-software/ng2-bootstrap/blob/development/docs/…

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.

Para agregar Bootstrap y Jquery

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.