Installare Bootstrap 5.3.2 come dipendenza di app Angular 17.0.8

E’ un pò di tempo che non scrivo un nuovo articolo per il mio Blog, oggi volevo riprendere con questo argomento: come installare Bootstrap 5.3.2 come dipendenza di un progetto Angular 17.0.8.

1. Posizionarsi sulla root del progetto, tramite terminale Node.js eseguire il seguente comando:

npm install bootstrap@5.3.2 –save –style sass

per chi non conoscesse bene le opzioni di node.js –save permette di includere automaticamente il pacchetto all’interno della sezione delle dipendenze del progetto nel file package.json e –style indica il tipo di foglio di stile da usare nel nostro caso se si preferisce usare sass lo indichiamo.

2. Una volta terminata l’installazione del modulo bootstrap verrà segnalato un warning che indica che è necessario installare due dipendenze per far funzionare correttamente bootstrap che sono le seguenti:

npm install jquery@1.9.1 –save –style sass

npm install popper.js@^1.12.9 –save –style sass

3. Aprire il vostro angular-cli.json e aggiungere lo stile e gli script nel seguente modo:

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

4. Infine bisogna inserire nel file style.scss la seguente riga che permette di importare il foglio di stile di bootstrap:

@import “../node_modules/bootstrap/scss/bootstrap”;

5. A questo punto basta ricompilare lanciando il comando:

ng serve

e se la compilazione va a buon fine, l’applicazione dovrebbe rimanere in ascolto al seguente socket:

localhost:4200

6. Per testare la corretta installazione di bootstrap nel vostro applicativo io consiglierei il seguente approccio, genererei un nuovo componente per tenere una separazione tra l’header e il corpo dell’applicazione, quindi eseguire il comando:

ng g component app-navbar

che crea il componente app-navbar nella root dell’app, con tutti i file necessari per il suo funzionamento, nel file app-navbar.component.html uno dei file che verrà generato copiare e incollare il seguente codice bootsrap che permette di creare il classico menù di navigazione di Bootstrap adattabile alla risoluzione del device:

 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

Infine posizionati sul file html principale: app.component.html presente nella root dell’app e inserisci il tag col nome del componente appena creato in modo che il framework riesca a renderizzarlo:

<app-navbar></app-navbar>

nel punto in cui vuoi farlo renderizzare nel nostro caso il seguente codice:

<app-navbar></app-navbar>

<div class=”container”>

<divclass=”starter-template”>

<h1>Bootstrap starter template</h1>

<pclass=”lead”>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>

</div>

</div><!– /.container –>

Salvate e il browser si aggiornerà automaticamente con le modifiche apportate e verificate che il menù sarà il classico di bootstrap da modificare in base alle vostre esigenze progettuali e utilizzando un tool responsive potete vedere come si adatta la risoluzione del device utilizzato.

Per la guida passo passo di questo tutorial potete vedere il video seguente: