Angular9でBootstrap4を使う

始めに

• Angular 9系にBootstrap4 (ng-bootstrap) を適用する手順です。
• 通常の Bootstrap（jQuery, popper.js依存）を使用してもよいですが、余計なライブラリに依存することになる事になるため、おすすめしません。
  • ng-bootstrapは、Bootstrapが依存しているjQuery, popper.jsの実装をAngularのcomponentに差し替えています。
• メジャーバージョンはしっかりと確認する。
  • 特に Angular5 と Angular6+では CLI の設定ファイル周りが大きく変更となっています。
• 公式の英語ドキュメント読むのめんどいって方向け。

環境

タイトルにもある通り、今回はAngular9系にBootstrap4を適用します。

$ ng --version 
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.7
Node: 12.14.1
OS: linux x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@angular/localize                 9.1.1
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.5
typescript                        3.7.5
webpack                           4.41.2

手順

2021/08/26 追記

今でも割と見られているようなので追記します。Angular 9+ の場合は、ワンライナーで適用できるようになったみたいです。

ng add @ng-bootstrap/ng-bootstrap

手動でインストールする場合

Angular 9 未満の場合は、CLI が対応していないので以下の手順を踏む必要があります。

ng-bootstrapをインストールする

Angular 9.0.0 以上かつ ng-bootstrap 6.0.0 以上の場合は@angular/localizeをpolyfillsに追加する必要があります。

ng add @angular/localize

ng-bootstrapをインストールする。（Bootstrapに依存しているため、一緒にインストールします。）

npm install @ng-bootstrap/ng-bootstrap bootstrap

ルートモジュールにインポートする。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular.jsonに設定を追加する

グローバルスタイルとして、bootstrap を使用するために以下を追記する。

angular.json

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

動作確認

app.component.html

<button type="button" class="btn btn-primary">test</button>

アプリケーションを起動後、http://localhost:4200にアクセスし、以下の画面が見えればOKです。

参考

• ng-bootstrap#getting-started