Cómo instalar Bootstrap en Angular 18 o superior

Introducción

Instalar Bootstrap en Angular es un proceso sencillo y rápido. Sin embargo, hay que tener en cuenta algunos detalles para que la instalación sea correcta. En este artículo te explico cómo instalar Bootstrap en Angular paso a paso.

Prerequisitos

Para seguir este artículo necesitas tener instalado:

El proyecto de Angular del ejemplo tiene versión 18.1.1 y usa scss como preprocesador de estilos.

Instalación

Visita la web oficial de Bootstrap y copia el comando de instalación. En el momento de escribir este artículo, los comandos de instalación que puedes usar para npm o pnpm son los siguientes:

npm i [email protected]

También puedes usar pnpm o yarn. En este caso, el comando sería el siguiente:

pnpm i [email protected]

Comprobar la instalación

Una vez que hayas ejecutado la instalación, Bootstrap se instalará en tu proyecto Angular. El archivo package.json usando la versión 18 de Angular se ve así:

  "dependencies": {
    "@angular/animations": "^18.1.1",
    "@angular/common": "^18.1.1",
    "@angular/compiler": "^18.1.1",
    "@angular/core": "^18.1.1",
    "@angular/forms": "^18.1.1",
    "@angular/platform-browser": "^18.1.1",
    "@angular/platform-browser-dynamic": "^18.1.1",
    "@angular/router": "^18.1.1",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },

Usa el mismo gestor de paquetes

Es importante instalar los paquetes con el mismo gestor de paquetes. Si usas npm, instala Bootstrap con npm. Si usas pnpm, instala Bootstrap con pnpm. Personalmente, suelo usar pnpm.

Después de la instalación, la dependencia se añade al array dependencies en el archivo package.json. Si añades la dependencia al array devDependencies, Bootstrap no se instalará correctamente en producción.

Importar Bootstrap en Angular

En este punto, Bootstrap ya está instalado y se ha asignado como dependencia. El problema es que no se está usando:

• Abre el archivo angular.json y añade la ruta de los estilos de Bootstrap en la sección styles
• Abre el archivo angular.json y añade la ruta de los scripts de Bootstrap en la sección scripts

El código de angular.json se ve así:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "application-example": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "styles": [
              "node_modules/bootstrap-icons/font/bootstrap-icons.min.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ],
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "@angular/localize/init",
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        }
      }
    }
  }
}

Orden del array de estilos

El orden en el array styles es importante. Si tienes estilos propios, asegúrate que Bootstrap se carga antes. De lo contrario, los estilos de Bootstrap pueden sobrescribir tus estilos personalizados.

Si estés interesado sólo en los estilos de Bootstrap y no en sus scripts de JavaScript:

• Borra la ruta de los scripts de Bootstrap del array scripts de angular.json
• Es un caso extraño, pero es posible.

Añadir esta configuración durante el build hace que el compilador añada los archivos cuando crea el bundle. Si no añades la configuración, Bootstrap no se incluirá en el bundle y no se aplicarán los estilos de Bootstrap.

Usar Bootstrap en los estilos globales de Angular

El último paso es añadir Bootstrap al archivo styles.scss de Angular con la sentencia @import. Los estilos de Bootstrap se aplicarán en toda la aplicación Angular.

El archivo styles.scss se ve así:

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100dvh;
}

//Bootstrap
@import 'bootstrap/scss/bootstrap';

.dropdown.no-arrow {
  .dropdown-toggle::after {
    display: none;
  }
}

Resumen del fichero styles.scss

El orden en el styles.scss es importante:

Si no sigues este orden, los estilos de Bootstrap pueden no aplicarse correctamente.