bootstrap
angular

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

ng-bootstrap のインストール

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"
      ],
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;
}