Angular アプリケーションに ng-bootstrap をインストールする

ng-bootstrap のインストール

• Getting started に従ってインストール

npm install --save @ng-bootstrap/ng-bootstrap

• app.module.ts で import

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Angular を最新に

• npm start すると Angular 5 系が必要ということなので 4.4 からアップデート
• 手順は Angular Update Guide に従う

npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'
npm install typescript@2.4.2 --save-exact

• ついでに angular-cli も 1.5 にアップデート

npm install @angular/cli@~1.5

• codelyzer のバージョンが古くて警告が出る場合は合わせて更新

npm i codelyzer@~4.0.0

bootstrap のインストール

• ng-bootstrap は bootstrap.css に依存しているのでインストールする

npm install bootstrap@4.0.0-beta.2

• .angular-cli.json に bootstrap.css を読み込む設定を追加

      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css", // この行を追加
        "styles.css"
      ],

• example のテンプレートを適用して動作確認

app.component.html

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" routerLink="">TOP</a>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a routerLink="detail">DETAIL</a>
      </li>
    </ul>
  </div>
</nav>

<main role="main" class="container">
  <router-outlet></router-outlet>
</main>

style.css

body {
  padding-top: 5rem;
}
.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}