AngularでBootstrap5を使う準備

はじめに

先日、Bootstrap 5 alphaがリリースされました。
jQueryとの依存関係が削除されたりして、シンプルにAngularと一緒に使えると考えました。
これは、そのメモです。

Angularプロジェクトの作成

まずは、テスト用に新しいプロジェクトを作ります。
任意のディレクトリに「angular-bootstrap-test」というプロジェクトを作成します。

$ ng new angular-bootstrap-test
$ ? Would you like to add Angular routing? (y/N) y
$ Which stylesheet format would you like to use? (Use arrow keys)
  > CSS
    Sass
    Less
    Stylus

Bootstrap5のインストール

作成したプロジェクトのデイレクトリに移動して、npmでインストールする。

$ cd angular-bootstrap-test
$ npm install popper.js --save
$ npm install bootstrap@next

fseventsの依存関係のエラーがでるが、「wanted {"os":"darwin" ...」ということで、MacOS限定のモジュールらしい。
インストール自体は成功するが、気になる場合は、「--no-optional」でインストールすれば良い。
これで、Bootstrap5がインストールされ、angular-bootstrap-test/node_modulesにbootstrapディレクトリができる。

使うための準備

Bootstrap5を使うために、angular.jsonを編集する。

"style":[
    "src/styles.css" ,
    "node_modules/bootstrap/dist/css/bootstrap.css"  //追加
],
"scripts":[
    "node_modules/bootstrap/dist/js/bootstrap.js"  //追加
],

これで使用できるようになりました。

使ってみる

app.component.htmlに適当に適当に追記してみる。

<p class="bg-dark text-light">Bootstrap test</p>

参考