Angular에 Bootstrap4 도입

개요

Angular7에 Bootstrap 4 (ng-bootstrap이 아님)를 도입 할 때의 비망록

절차

사전 확인

테스트로서 다음과 같은 HTML을 표시한 경우를 상정.

<h2>Angular に Bootstrap 導入</h2>

<div>
  <input type="text" placeholder="入力してください"/>
</div>
<div>
  <button class="btn btn-primary">ボタン</button>
</div>

도입 전에 화면을 표시해 보면 다음과 같은 상태.



음. 다사이.

그럼 도입해 갑시다.

설치

의존하는 라이브러리(jQuery, Popper.js)도 동시에 넣자.

npm i bootstrap jquery popper.js

angular.json에 추가

"styles" 와 "scripts" 에, 다음과 같이 라이브러리의 로드를 추기한다.
여러 개소이므로주의.

angular.json

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

상기는 Angular7의 경우의 기재.
Angular6 이전의 경우는 "../node_modules/bootstrap/dist/css/bootstrap.min.css" 와 같이 ../ 가 선두에 붙는다. (변경 개소는 함께)

확인

이제 앱을 다시 시작하고 화면을 보면 ....



음. 바뀌었습니다.
이대로는 아직 어색합니다만, 조금 배치 등 바꾸는 것만으로 간단하게 디자인 개선할 수 있습니다.

이상으로 도입은 완료.