Si encuentras algún problema con tu código o trabajo, recuerda probar siempre en un ambiente de testing antes aplicar el código al trabajo final.
Solución:
Tienes que instalar ambos bootstrap y JQuery:
npm install bootstrap jquery --save
Luego encontrará estos archivos en la carpeta del módulo de su nodo:
node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js
Entonces tienes que actualizar tu angular.json expediente:
En el architect, build sección, o incluso test sección si desea ver que Bootstrap también funcione al probar su aplicación.
"styles": [
"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"
],
Si no agrega el jquery.min.js el script Bootstrap no funcionará.
Otro requisito es popper.js si necesitas Menú desplegable de arranque luego deberá instalarlo y agregar el archivo de script también
npm install popper.js
Luego agregue este script también
"styles": [
"styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/popper.js/dist/popper.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
],
El menú desplegable Bootstrap requiere Popper.js (https://popper.js.org)
Si está agregando la ruta de arranque en el archivo angular.json, asegúrese de que sea el estilos dentro del proyectoarquitectoconstruir. No el del proyectoarquitectoprueba.
{
"projects": {
"architect": {
"build": {
"styles": [
"node_modules/bootstrap/dist/bootstrap.min.css",
"src/styles.css"
],
"test": {
"styles": [
"src/styles.css"
],
querido amigo, estoy estudiando el mismo tutorial de angular6. También enfrenté la misma situación. Finalmente, resolví este primer arranque de desinstalación. el siguiente paso es instalar bootstrap siguiendo el comando
npm install --save [email protected] A
a continuación, vaya a estilos.css y pegue
@import "node_modules/bootstrap/dist/css/bootstrap.css"
su aplicación definitivamente funcionará exactamente igual que en ese video tutorial de udemy
valoraciones y reseñas
Si crees que ha resultado útil este post, sería de mucha ayuda si lo compartieras con el resto juniors y nos ayudes a extender nuestra información.