始めに
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
手順
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]})exportclassAppModule{}angular.jsonに設定を追加する
グローバルスタイルとして、bootstrap を使用するために以下を追記する。
angular.json
"styles":["./node_modules/bootstrap/dist/css/bootstrap.min.css","src/styles.css"]動作確認
app.component.html
<buttontype="button"class="btn btn-primary">test</button>アプリケーションを起動後、http://localhost:4200にアクセスし、以下の画面が見えればOKです。
