Dodanie biblioteki Bootstrap do projektu angular

Aby nasza strona była zgodna z ogólnie przyjętą konwencją i mogła być dostosowana na różne urządzenia, ale także byśmy mogli bardziej się skupić nad jej rozwojem pod względem logiki zamiast standaryzacji wyglądu z pomocą przychodzi nam biblioteka bootstrap.

Biblioteka CSS, rozwijana przez programistów Twittera. Zawierjąca zestaw przydatnych narzędzi ułatwiających stworzenie pięknego interfejsu dla naszego projektu. Bazuje ona głównie na gotowych rozwiązaniach HTML oraz CSS. Posiada bardzo wiele zastosowań i możliwości oraz gotowych elementów takich jak teksty, formularze, przyciski, wykresy, nawigacje i innych komponentów wyświetlanych na stronie. No to tak w skrócie, ale zapytasz jak to podłączyć. Okazuje się, że bardzo prosto :) .

Pierwszą rzeczą którą należy wykonać gdy nasz projekt jest już postawiony należy dodać bibliotekę poprzez npm.

npm install --save bootstrap

Po pomyślnym zainstalowaniu modułu noda w naszym pliku package.json w zależnościach ukaże się poniższy wpis, w chwili pisania tego postu była to akurat wersja 4.3.1.

 "dependencies": {
    "bootstrap": "^4.3.1"
    ...
  }

Jeżeli chcemy oprócz styli css korzystać także z elementów javascript dodatkowo w celu prawidłowego ich działania musimy zainstalować dodatkową zależność w postaci biblioteki jquery z której korzysta bootstrap.js. W chwili pisania tego posta będzie to wersja jQuery 3.4.1

npm install --save jquery

Zawartość zostanie zainstalowana w folderze node_modules/bootstrap oraz node_modules/jquery. Następnym krokiem będzie wskazanie Angularowi gdzie ich szukać. W tym celu musimy wskazać ścieżkę plików *.css oraz *.js zawartym w node_modules w pliku angular.json.

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
"scripts": [
              "node_modules/jquery/dist/jquery.js"
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
           ]