Angular 4: ¿Cómo incluir Bootstrap?

Soy un desarrollador de backend y solo estoy jugando con Angular4. Así que hice este tutorial de instalación: https://www.youtube.com/watch?v=cdlbFEsAGXo .

Dado esto, ¿cómo puedo agregar bootstrap a la aplicación para poder usar la clase "container-fluid" o "col-md-6" y cosas así?

npm install --save bootstrap

luego, dentro de angular-cli.json (dentro de la carpeta raíz del proyecto), busque stylesy agregue el archivo bootstrap css como este:

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

ACTUALIZACIÓN:
en angular 6+ angular-cli.json se cambió a angular.json.

Ver video o seguir el paso

Instale bootstrap 4 en angular 2 / angular 4 / angular 5 / angular 6

Hay tres formas de incluir bootstrap en su proyecto
1) Agregue un enlace CDN en el archivo index.html
2) Instale bootstrap usando npm y establezca la ruta en angular.json Recomendado
3) Instale bootstrap usando npm y establezca la ruta en el archivo index.html

Le recomendé seguir 2 métodos que se instalan bootstrap usando npm porque está instalado en el directorio de su proyecto y puede acceder fácilmente a él

Método 1

Agregue Bootstrap, Jquery y popper.js CDN path a su archivo angular index.html del proyecto

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap. min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12 .9 / umd / popper.min.js

Método 2

1) Instale bootstrap usando npm

npm install bootstrap --save

después de la instalación de Bootstrap 4, necesitamos dos paquetes más de javascript que son Jquery y Popper.js sin estos dos paquetes bootstrap no está completo porque Bootstrap 4 usa el paquete Jquery y popper.js, así que tenemos que instalarlo también

2) Instale JQUERY

npm install jquery --save

3) Instale Popper.js

npm install popper.js --save

Ahora Bootstrap está instalado en su directorio de proyectos dentro de la carpeta node_modules

abra angular.json este archivo está disponible en su directorio angular abra ese archivo y agregue la ruta de los archivos bootstrap, jquery y popper.js dentro de los estilos [] y scripts [] ruta vea el siguiente ejemplo

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

Nota: No cambie una secuencia de archivo js, ​​debería ser así

Método 3

Instale bootstrap usando npm siga el Método 2 en el método 3, simplemente establecemos la ruta dentro del archivo index.html en lugar del archivo angular.json

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Ahora Bootstrap funciona bien ahora

Para configurar / integrar / usar Bootstrap en angular, primero necesitamos instalar el paquete Bootstrap usando npm.

Paquete de instalación

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Nota: el comando --save guardará la dependencia en nuestra aplicación angular dentro del archivo package.json.

Ahora que tenemos el paquete instalado con el paso anterior, ahora podemos decirle a Angular CLI que necesita cargar estos estilos usando cualquiera de las siguientes opciones o ambas:

opción 1) Agregar en el archivo src / styles.css

podemos agregar las dependencias como se muestra a continuación:

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

Opción 2) Agregar en angular-cli.json o angular.json

Podemos agregar los archivos CSS de estilo en el archivo angular-cli.json o angular.json que se encuentra en la carpeta raíz de nuestra aplicación angular como se muestra a continuación:

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

Angular 4 - Configuración de Bootstrap / @ ng-bootstrap

Primero instale bootstrap en su proyecto usando el siguiente comando:

npm install --save bootstrap

Luego agregue esta línea "../node_modules/bootstrap/dist/css/bootstrap.min.css" al archivo angular-cli.json (carpeta raíz) en estilos

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

Después de instalar las dependencias anteriores, instale ng-bootstrap a través de:

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

Una vez instalado, debe importar el módulo principal.

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

Después de esto, puede usar todos los widgets de Bootstrap (por ejemplo, carrusel, modal, popovers, información sobre herramientas, pestañas, etc.) y varias ventajas adicionales (selector de fecha, clasificación, selector de tiempo, escritura anticipada).

En Angular4, mientras trata con el sistema @types , debe hacer las siguientes cosas,

Hacer,

1) npm install --save @types/jquery
2) npm install --save @types/bootstrap

tsconfig.json

busque la matriz de tipos y agregue las entradas jquery y bootstrap ,

"types": [
      "jquery",
      "bootstrap",  
      "node"
]

Index.html

en la sección de cabecera agregue las siguientes entradas,

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

Y comience a usar jquery y bootstrap ambos.

Si está utilizando Sass / Scss, siga esto,

Hacer npm install

npm install bootstrap --save

y agregue una importdeclaración a su archivo sass / scss,

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

Para ver los pasos detallados a continuación y el ejemplo de trabajo, puede visitar https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Pasos muy detallados con una explicación adecuada.

Pasos: instalar Bootstrap desde NPM

A continuación, necesitamos instalar Bootstrap. Cambie el directorio al proyecto que creamos (cd angular-bootstrap-example) y ejecute el siguiente comando:

Para Bootstrap 3:

npm install bootstrap --save

Para Bootstrap 4 (actualmente en versión beta):

npm install bootstrap@next --save

O Alternativa: Bootstrap CSS local Como alternativa, también puede descargar Bootstrap CSS y agregarlo localmente a su proyecto. Descargué Bootstrap del sitio web y creé estilos de carpeta (mismo nivel que styles.css):

Nota: No coloque sus archivos CSS locales en la carpeta de activos. Cuando hacemos la compilación de producción con Angular CLI, los archivos CSS declarados en .angular-cli.json se reducirán y todos los estilos se agruparán en un solo styles.css. La carpeta de activos se copia en la carpeta dist durante el proceso de compilación (el código CSS se duplicará). Solo coloque sus archivos CSS locales debajo de los activos en caso de que los importe directamente en index.html.

Importación del CSS 1. Tenemos dos opciones para importar el CSS desde Bootstrap que se instaló desde NPM:

texto fuerte 1: Configure .angular-cli.json:

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

2: Importe directamente en src / style.css o src / style.scss:

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

Personalmente prefiero importar todos mis estilos en src / style.css ya que ya se ha declarado en .angular-cli.json.

3.1 Alternativa: CSS Bootstrap local Si agregó el archivo CSS Bootstrap localmente, simplemente impórtelo en .angular-cli.json

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

o src / style.css

@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';

4: Componentes JavaScript Bootstrap con ngx-bootstrap (Opción 1) En caso de que no necesite utilizar componentes JavaScript Bootstrap (que requieren JQuery), esta es toda la configuración que necesita. Pero si necesita usar modales, acordeón, selector de fechas, información sobre herramientas o cualquier otro componente, ¿cómo podemos usar estos componentes sin instalar jQuery?

Existe una biblioteca contenedora angular para Bootstrap llamada ngx-bootstrap que también podemos instalar desde NPM:

npm install ngx-bootstrap --save

Tenga en cuenta que ng2-bootstrap y ngx-bootstrap son el mismo paquete. ng2-bootstrap se renombró a ngx-bootstrap después de #itsJustAngular.

En caso de que desee instalar Bootstrap y ngx-bootstrap al mismo tiempo cuando crea su proyecto CLI de Angular:

npm install bootstrap ngx-bootstrap --save

4.1: Agregar los módulos Bootstrap requeridos en app.module.ts

Siga el ngx-bootstrap y agregue los módulos necesarios en su app.module.ts. Por ejemplo, supongamos que queremos usar los componentes desplegable, descripción emergente y modal:

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    BrowserModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  // ...
})
export class AppBootstrapModule {}

Debido a que llamamos al método .forRoot () para cada módulo (debido a los proveedores de módulos ngx-bootstrap), las funcionalidades estarán disponibles en todos los componentes y módulos de su proyecto (alcance global).

Como alternativa, si desea organizar el ngx-bootstrap en un módulo diferente (solo con fines de organización en caso de que necesite importar muchos módulos bs y no desee saturar su módulo de aplicación), puede crear un módulo app-bootstrap.module.ts, importe los módulos Bootstrap (usando forRoot ()) y también declarelos en la sección de exportaciones (para que también estén disponibles para otros módulos).

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  imports: [
    CommonModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}

Por último, no olvide importar su módulo de arranque en su app.module.ts.

importar {AppBootstrapModule} desde './app-bootstrap/app-bootstrap.module';

@NgModule({
  imports: [BrowserModule, AppBootstrapModule],
  // ...
})
export class AppModule {}

ngx-bootstrap funciona con Bootstrap 3 y 4. Y también hice algunas pruebas y la mayoría de las funcionalidades también funcionan con Bootstrap 2.x (sí, todavía tengo algo de código heredado que mantener).

¡Espero que esto ayude a alguien!

Probado en Angular 7.0.0

Paso 1: instale las dependencias necesarias

npm install bootstrap (si desea una versión específica, especifique el número de versión)

npm install popper.js (si desea una versión específica, especifique el número de versión)

npm instalar jquery

Versiones que he probado:

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

Paso 2: especifique las bibliotecas en el siguiente orden en angular.json. En el último angular, el nombre del archivo de configuración es angular.json no angular-cli.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },

Para bootstrap 4.0.0-alph.6

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

Luego, una vez hecho esto, ejecute:

npm install

Ahora. Abra el archivo .angular-cli.json e importe bootstrap, jquery y tether:

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

Y ahora. Estás listo para irte.

Como puedo ver, ya tienes muchas respuestas, pero puedes probar este método.

Su mejor práctica es no usar jquery en angular, prefiero https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md método para instalar bootstrap sin usar bootstrap js componente que depende de jquery.

npm install ngx-bootstrap bootstrap --save

or

ng add ngx-bootstrap   (Preferred)

Mantenga su código jquery libre en angular

Ejecute el siguiente comando en su proyecto, es decir, npm install [email protected] --save

Después de instalar la dependencia anterior, ejecute el siguiente comando npm que instalará el módulo de arranque npm install --save @ ng-bootstrap / ng-bootstrap

Mira esto para referencia: https://github.com/ng-bootstrap/ng-bootstrap

Agregue la siguiente importación en app.module import {NgbModule} desde '@ ng-bootstrap / ng-bootstrap'; y agregue NgbModule a las importaciones

En su stye.css @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Paso 1: npm install bootstrap --save

Paso: 2: Pegue el código debajo en angular.json node_modules / bootstrap / dist / css / bootstrap.min.css

Paso 3: servir

agregar en angular-cli.json

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

Funcionará, lo comprobé.

Si desea utilizar bootstrap en línea y su aplicación tiene acceso a Internet, puede agregar

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

En su archivo principal style.css. y es la forma más sencilla.

Referencia: angular.io

Nota. Esta solución carga bootstrap desde el sitio web de Unkg y necesita tener acceso a Internet.

CLI de Angular 6, solo haz lo siguiente:

ng agregar @ ng-bootstrap / schematics 

Para instalar el último uso $ npm i --save bootstrap @ next

primero instale bootstrap en su proyecto usando npm npm i bootstrap después de que abra el archivo ur style.css en su proyecto y agregue esta línea

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

y eso es todo bootstrap agregado en su proyecto

| * | Instalación de Bootstrap 4 para Angular 2, 4, 5, 6 +:

| +> Instalar Bootstrap con npm

npm install bootstrap --save

npm install popper.js --save

| +> Agregar estilos y scripts a angular.json

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

Si está en Angular 6+, agregue lo siguiente a angular.json :

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

Añadiendo la versión actual 4 de bootsrap a angular:

1 / Primero tienes que instalar estos:

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

2 / Luego agregue los archivos de script necesarios a los scripts en angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 / Finalmente agregue Bootstrap CSS a la matriz de estilos en angular.json:

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

revisa este enlace

trabaja con cdn para bootstrap y jquery o instala bootstarp directamente en la aplicación con:

npm install ngx-bootstrap --save

también use https://ng-bootstrap.github.io/#/home , pero esto no es apropiado

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a