¿Cómo usar Bootstrap en un proyecto angular?

Estoy comenzando mi primera aplicación angular y mi configuración básica está lista.

¿Cómo puedo agregar Bootstrap a mi aplicación?

Si puede proporcionar un ejemplo, sería de gran ayuda.

Siempre que use la CLI Angular para generar nuevos proyectos, hay otra forma de hacer accesible el arranque en Angular 2/4 .

1. A través de la interfaz de línea de comandos, navegue a la carpeta del proyecto. A continuación, utilice la NGP para instalar archivos de inicio:
   $ npm install --save bootstrap. La --saveopción hará que bootstrap aparezca en las dependencias.
2. Edite el archivo .angular-cli.json, que configura su proyecto. Está dentro del directorio del proyecto. Agregue una referencia a la "styles"matriz. La referencia debe ser la ruta relativa al archivo bootstrap descargado con npm. En mi caso es:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

Mi ejemplo .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Ahora bootstrap debería ser parte de su configuración predeterminada.

Una integración con Angular2 también está disponible a través del proyecto ng2-bootstrap : https://github.com/valor-software/ng2-bootstrap .

Para instalarlo, simplemente ponga estos archivos en su página HTML principal:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Luego puede usarlo en sus componentes de esta manera:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}

Todo lo que necesita hacer es incluir el css boostrap dentro de su archivo index.html.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Otra muy buena (¿mejor?) Alternativa es usar un conjunto de widgets creados por el equipo angular-ui: https://ng-bootstrap.github.io

Si planea usar Bootstrap 4, que se requiere con el ng-bootstrap del equipo angular-ui que se menciona en este hilo, querrá usar esto en su lugar (NOTA: no necesita incluir el archivo JS):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

También puede hacer referencia a esto localmente después de ejecutar npm install [email protected] --saveseñalando el archivo en su styles.scssarchivo, suponiendo que esté usando SASS:

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

La opción más popular es usar alguna biblioteca de terceros distribuida como paquete npm como el proyecto ng2-bootstrap https://github.com/valor-software/ng2-bootstrap o la biblioteca Bootstrap Angular UI.

Yo personalmente uso ng2-bootstrap. Hay muchas formas de configurarlo, porque la configuración depende de cómo se construya su proyecto Angular. Debajo publico una configuración de ejemplo basada en el proyecto Angular 2 QuickStart https://github.com/angular/quickstart

En primer lugar, agregamos dependencias en nuestro paquete.json

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

Luego tenemos que asignar nombres a las URL adecuadas en systemjs.config.js

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

Tenemos que importar el archivo bootstrap .css en index.html. Podemos obtenerlo del directorio / node_modules / bootstrap en nuestro disco duro (porque agregamos la dependencia de bootstrap 3.3.7) o de la web. Ahí lo estamos obteniendo de la web:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Deberíamos editar nuestro archivo app.module.ts del directorio / app

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Y finalmente nuestro archivo app.component.ts del directorio / app

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Luego tenemos que instalar nuestras dependencias bootstrap y ng2-bootstrap antes de ejecutar nuestra aplicación. Deberíamos ir a nuestro directorio de proyectos y escribir

npm install

Finalmente podemos comenzar nuestra aplicación

npm start

Hay muchos ejemplos de código en el github del proyecto ng2-bootstrap que muestra cómo importar ng2-bootstrap a varias compilaciones de proyectos de Angular 2. Incluso hay muestra plnkr. También hay documentación de API en el sitio web de Valor-software (autores de la biblioteca).

En un entorno angular-cli, la forma más directa que he encontrado es la siguiente:

1. Solución en un entorno con hojas de estilo s̲c̲s̲s̲

npm install bootstrap-sass —save

En style.scss:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Nota 1: El ~carácter es una referencia a la carpeta node_modules .
Nota 2: Como estamos usando scss, podemos personalizar todas las variables de arranque que queramos.

2. Solución en un entorno con hojas de estilo c̲s̲s̲

npm install bootstrap —save

En style.css:

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

Hay varias formas de configurar angular2 con Bootstrap, una de las formas más completas para aprovecharlo al máximo es usar ng-bootstrap, usando esta configuración le damos a algular2 un control completo sobre nuestro DOM, evitando la necesidad de usar JQuery y Boostrap .js.

1-Tome como punto de partida un nuevo proyecto creado con Angular-CLI y usando la línea de comando, instale ng-bootstrap:

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

Nota: Más información en https://ng-bootstrap.github.io/#/getting-started

2-Entonces necesitamos instalar bootstrap para el sistema CSS y el grid.

npm install bootstrap@4.0.0-beta.2 --save

Nota: Más información en https://getbootstrap.com/docs/4.0/getting-started/download/

Ahora tenemos la configuración del entorno y para eso tenemos que cambiar el .angular-cli.json agregando al estilo:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Aquí hay un ejemplo:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

El siguiente paso es agregar el módulo ng-boostrap a nuestro proyecto, para ello necesitamos agregar en app.module.ts:

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

Luego agregue el nuevo módulo a la aplicación de aplicación: NgbModule.forRoot ()

Ejemplo:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Ahora podemos comenzar a usar bootstrap4 en nuestro proyecto angular2 / 5.

Tenía la misma pregunta y encontré este artículo con una solución realmente limpia:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

Aquí están las instrucciones, pero con mi solución simplificada:

Instalar Bootstrap 4 ( instrucciones ):

npm install --save bootstrap@4.0.0-alpha.6

Si es necesario, cambie el nombre de su src / styles.css a styles.scss y actualice .angular-cli.json para reflejar el cambio:

"styles": [
  "styles.scss"
],

Luego agregue esta línea a styles.scss :

@import '~bootstrap/scss/bootstrap';

solo verifique su archivo package.json y agregue dependencias para bootstrap

"dependencies": {

   "bootstrap": "^3.3.7",
}

luego agregue el siguiente código en el .angular-cli.jsonarchivo

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

Finalmente, solo actualiza su npm localmente usando terminal

$ npm update

1. npm install --save bootstrap

2. vaya a -> archivo angular-cli.json , busque propiedades de estilos y simplemente agregue la siguiente picadura: "../node_modules/bootstrap/dist/css/bootstrap.min.css", podría verse así:

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

Procedimiento con Angular 6+ y Bootstrap 4+:

1. Abra un shell en la carpeta de su proyecto
2. Instale bootstrap con el comando: npm install --save [email protected]
3. Bootstrap necesita la dependencia jquery, por lo que si no la tiene, puede instalarla con el comando: npm install --save jquery 1.9.1
4. Es posible que deba corregir la vulnerabilidad con el comando: npm audit fix
5. En su archivo principal style.scss, agregue la siguiente línea: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

O

Agregue esta línea a su archivo index.html principal: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Estaba buscando la misma respuesta y finalmente encontré este enlace. Puede encontrar explicadas tres formas diferentes de cómo agregar bootstrap css en su proyecto angular 2. Me ayudó.

Aquí está el enlace: http://codingthesmartway.com/using-bootstrap-with-angular/

Mi recomendación sería en lugar de declararlo en el json stylus para ponerlo en el scss para que todo esté compilado y en un solo lugar.

1) instalar bootstrap con npm

 npm install bootstrap

2) Declarar bootstrap npm en el CSS con nuestros estilos

Crear _bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) Dentro de styles.scss insertamos

@import "bootstrap-custom";

así tendremos todo nuestro núcleo compilado y en un solo lugar

Puedes intentar usar la biblioteca de la interfaz de usuario de Prettyfox http://ng.prettyfox.org

Esta biblioteca usa estilos bootstrap 4 y no necesita jquery.

agregue las siguientes líneas en su página html

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

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

Si usa angular cli, después de agregar bootstrap en package.json e instalar el paquete, todo lo que necesita es agregar boostrap.min.css en la sección de "estilos" de .angular-cli.json.

Una cosa importante es "Cuando realice cambios en .angular-cli.json deberá reiniciar ng serve para recoger los cambios de configuración".

Árbitro:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Otra muy buena alternativa es usar el esqueleto Angular 2/4 + Bootstrap 4

1) Descargar ZIP y extraer la carpeta zip

2) ng servir