Com instal·lar Bootstrap 5.5.3 a Angular 18 o superior

Introducció

Instal·lar Bootstrap a Angular és un procés senzill i ràpid. No obstant això, cal tenir en compte alguns detalls perquè la instal·lació sigui correcta. En aquest article t’explico com instal·lar Bootstrap a Angular pas a pas.

Prerequisits

Per seguir aquest article necessites tenir instal·lat:

El projecte d’Angular de l’exemple té versió 18.1.1 i utilitza scss com a preprocessador d’estils.

Executar la comanda d’instal·lació

Visita la web oficial de Bootstrap i copia la comanda d’instal·lació. En el moment d’escriure aquest article, les comandes d’instal·lació que pots utilitzar per npm o pnpm són les següents:

npm i [email protected]

També pots utilitzar pnpm o yarn. En aquest cas, la comanda seria la següent:

pnpm i [email protected]

Comprovar la instal·lació

Un cop hagis executat la comanda d’instal·lació, Bootstrap s’instal·larà en el teu projecte Angular. El fitxer package.json fetn servir versió 18 d’Angular es veu de la següent manera:

  "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"
  },

Consells

És important instal·lar els paquets amb el mateix gestor de paquets que utilitzes a Angular. Si utilitzes npm, instal·la Bootstrap amb npm. Si utilitzes pnpm, instal·la Bootstrap amb pnpm. Personalment, solc utilitzar pnpm.

Un altre aspecte important és que la dependència s’afegeix a l’array dependencies al fitxer package.json. Si afegeixes la dependència a l’array de devDependencies, Bootstrap no s’instal·larà correctament quan estigui a producció.

Importar Bootstrap en el teu projecte Angular

Importa els estils de Bootstrap al teu projecte. Per a això, obre el fitxer angular.json i afegeix la ruta dels estils de Bootstrap a la secció styles i la ruta del codi javascript de Bootstrap a la secció scripts.

{
  "$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"
            ]
          }
        }
      }
    }
  }
}

Consells

L’ordre a l’array styles és important. Si tens estils propis, assegura’t que Bootstrap es carrega abans. Si no, els estils de Bootstrap poden sobrescriure els teus estils.

Pot donar-se el cas que només estiguis interessat en els estils de Bootstrap i no en els scripts de JavaScript. En aquest cas, no és necessari afegir la ruta dels scripts de Bootstrap a la secció scripts. Seria una mica estrany, però és possible.

Afegir aquesta configuració durant el build fa que el compilador afegeixi els fitxers quan crea el bundle. Si no afegeixes aquesta configuració, Bootstrap no s’inclourà en el bundle i no s’aplicaran els estils de Bootstrap.

Importar Bootstrap en els estils globals d’Angular

Importa els estils de Bootstrap al fitxer styles.scss d’Angular amb la sentència @import. D’aquesta manera, els estils de Bootstrap s’aplicaran a tota l’aplicació Angular.

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

body {
  height: 100dvh;
}

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

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

Consells

L’ordre al fitxer és important. A mode de resum: