javascript - how - ¿Cómo agregar bootstrap en un proyecto angular 6?
install bootstrap angular 6 (4)
Estás utilizando Angular v6 no 2
Angular v6 en adelante
Los proyectos CLI en angular 6 en adelante usarán
angular.json
lugar de
.angular-cli.json
para la
.angular-cli.json
de compilación y proyecto.
Cada área de trabajo de la CLI tiene proyectos, cada proyecto tiene objetivos y cada objetivo puede tener configuraciones. Docs
. {
"projects": {
"my-project-name": {
"projectType": "application",
"architect": {
"build": {
"configurations": {
"production": {},
"demo": {},
"staging": {},
}
},
"serve": {},
"extract-i18n": {},
"test": {},
}
},
"my-project-name-e2e": {}
},
}
OPCIÓN 1
ejecute
npm install bootstrap@4 jquery --save
Las partes de JavaScript de
Bootstrap
dependen de
jQuery
.
Así que necesitas el archivo de biblioteca
jQuery
JavaScript
también.
En su angular.json, agregue las rutas de archivo a la matriz de estilos y scripts en el objetivo de
build
inferior
NOTA:
Antes de v6, la configuración del proyecto Angular CLI se almacenaba en
<PATH_TO_PROJECT>/.angular-cli.json.
A partir de v6, la ubicación del archivo cambió a
angular.json.
Como ya no hay un punto inicial, el archivo ya no está oculto por defecto y está en el mismo nivel.
lo que también significa que las rutas de archivos en angular.json no deben contener puntos y barras diagonales.
es decir, puede proporcionar una ruta absoluta en lugar de una ruta relativa
En el archivo
.angular-cli.json
, la ruta era
"../node_modules/"
En
angular.json
es
"node_modules/"
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ng6",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css","node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": ["node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"]
},
OPCION 2
Agregue archivos de CDN (Content Delivery Network) a su proyecto
CDN LINK
Abra el archivo src / index.html e inserte
el elemento
<link>
al final de la sección principal para incluir el archivo CSS de Bootstrap
un elemento
<script>
para incluir jQuery en la parte inferior de la sección del cuerpo
un elemento
<script>
para incluir Popper.js en la parte inferior de la sección del cuerpo
un elemento
<script>
para incluir el archivo JavaScript Bootstrap en la parte inferior de la sección del cuerpo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<app-root>Loading...</app-root>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
OPCION 3
Ejecutar
npm install bootstrap
En
src/styles.css
agregue la siguiente línea:
@import "~bootstrap/dist/css/bootstrap.css";
OPCION-4
ng-bootstrap
Contiene un conjunto de directivas angulares nativas basadas en el marcado de Bootstrap y CSS.
Como resultado, no depende de jQuery o de JavaScript de Bootstrap
npm install --save @ng-bootstrap/ng-bootstrap
Después de la instalación, impórtelo en su módulo raíz y regístrelo en
@NgModule
imports` array
import {NgbModule} from ''@ng-bootstrap/ng-bootstrap'';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
NOTA
ng-bootstrap
requiere que se agreguen 4 css de Bootstrap en tu proyecto.
necesitas instalarlo explícitamente a través de:
npm install bootstrap@4 --save
En su angular.json agregue las rutas de archivo a la matriz de estilos en el objetivo de
build
inferior
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Esta pregunta ya tiene una respuesta aquí:
- ¿Cómo utilizar bootstrap 4 en angular 2? 11 respuestas
app.component.ts He intentado agregar la dependencia de estilos en el paquete angular.json pero demostrando que no se encontró el módulo. añadiendo dos de los archivos bootstrap. Aquí está la captura de pantalla de ambos archivos.
El archivo angular.json es como este archivo angular.json.
usando comando
npm install bootstrap --save
abra el archivo .angular.json antiguo (.angular-cli.json) encuentre los "estilos" agregue el archivo css bootstrap
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
npm install --save bootstrap
luego, dentro de
angular.json
(anteriormente
.angular-cli.json
) dentro de la carpeta raíz del proyecto, encuentre estilos y agregue el archivo css bootstrap como este:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
npm install bootstrap --save
y agregue los archivos relevantes en el archivo
angular.json
bajo la propiedad de
style
para archivos css y bajo
scripts
para archivos JS.
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
....
]