Cómo agregar bootstrap a un proyecto angular-cli

Este enunciado ha sido evaluado por expertos para asegurar la exactitud de este tutorial.

Solución:

ACTUALIZACIÓN IMPORTANTE:ng2-bootstrap ahora es reemplazado por ngx-bootstrap

ngx-bootstrap admite Angular 3 y 4.

Actualizar : 1.0.0-beta.11-webpack o versiones superiores

En primer lugar, compruebe su angular-cli versión con el siguiente comando en la terminal:

ng -v

Si tu angular-cli la versión es mayor que 1.0.0-beta.11-paquete web, entonces debes seguir estos pasos:

1. Instalar en pc ngx-bootstrap y oreja:

   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 ngx-bootstrap admite ambas versiones.

2. Abierto src / app / app.module.ts y añadir:

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

3. Abierto angular-cli.json (para angular6 y el nombre de archivo posterior cambió a angular.json ) e inserte una nueva entrada en el styles array:

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

4. Abierto src / app / app.component.html y añadir:

   hello
   

1.0.0-beta.10 o versiones anteriores:

Y, si tu angular-cli la versión es 1.0.0-beta.10 o más abajo, puede seguir los pasos a continuación.

Primero, vaya al directorio del proyecto y escriba:

npm install ngx-bootstrap --save

Luego, abre tu angular-cli-build.js y agregue esta línea:

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

Ahora abre tu src / system-config.ts luego escribir:

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

…y:

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

Buscando el key word> Global Library Installation en https://github.com/angular/angular-cli le 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 [email protected]

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

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

Finalmente agregue Bootstrap CSS a las aplicaciones[0].estilos array:

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

Ésta es la mejor solución. Pero si no reinicia ng serve, nunca funcionará. Se recomienda encarecidamente realizar esta última acción.

Haz lo siguiente:

npm i [email protected] --save

Esto agregará bootstrap 4 a su proyecto.

Luego ve a tu src/style.scss o src/style.css file (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 los scripts, aún tendrá que agregar el archivo en el archivo angular-cli.json así (En la versión 6 de Angular, 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"
],

Tienes la opción de sostener nuestra ocupación mostrando un comentario y dejando una valoración te damos la bienvenida.

---

---

Utiliza Nuestro Buscador