Angular-cliにng2-bootstrapを導入する

投稿日：2017年3月13日更新日：2017年4月11日

Angular2の開発でbootstrapを使用するにはng2-bootsrapを導入します。ng2-bootsrapはbootstrapの機能をディレクティブやコンポーネントとして提供してくれます。angular-cliの開発環境でのng2-bootsrapを導入方法を説明します。

１．Angular-cliの導入

最初にangular-cliを導入します。angular-cliが未導入の場合は以下を参考にして下さい。
Angular2の開発環境を構築（angular-cli）

２．Angular2のプロジェクト作成

作業ディレクトリ（当サイトでは「C:\ng2test」）に、サンプルプロジェクトを「sample2」を作成します。プロジェクト作成は以下を参考にして下さい。

Angular2のプロジェクト作成からデプロイまで

　
C:¥ng2test>ng new sample2

C:¥ng2test>cd sample2 

C:¥ng2test¥sample2>

C:¥ng2test¥sample2>ng serve

C:¥ng2test>ng new sample2

C:¥ng2test>cd sample2

C:¥ng2test¥sample2>

C:¥ng2test¥sample2>ng serve

３．ng2-bootstrapとbootstrapのインストール

npmでng2-bootstrapとbootstrapのパッケージをローカルインストールします。[--save]オプションを指定して、package.jsonにパッケージ情報を書き込みます。

　
C:¥ng2test¥sample2>npm install ng2-bootstrap bootstrap --save

C:¥ng2test¥sample2>npm install ng2-bootstrap bootstrap --save

４．src/app/app.module.tsの編集

src/app/app.module.tsを編集して、ng2-bootstrapのモジュールのインポート定義を行います。AlertModule、ModalModule、ButtonsModule...のように別々のモジュールを個別にインポートしても構いませんが、いろいろ使っていくとインポートするモジュールも多くなって面倒なので、全てを読み込むNg2BootstrapModuleを定義しています。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

//ng2-bootstrapの定義
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    Ng2BootstrapModule.forRoot()  //ng2-bootstrapのモジュール
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

//ng2-bootstrapの定義

import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

HttpModule,

Ng2BootstrapModule.forRoot() //ng2-bootstrapのモジュール

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

５．angular-cli.jsonの編集

angular-cli.jsonにbootstrapのcssを追加します。

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

"styles": [

"../node_modules/bootstrap/dist/css/bootstrap.min.css",

"styles.css"

６．動作テスト確認

src/app/app.component.htmlを編集してng2-bootsrapの動作テストを行います。Alertモジュールを使用してアラートメッセージを表示します。

<h1>
  <alert type="success">{{title}}</alert>
</h1>

<h1>

<alert type="success">{{title}}</alert>

</h1>

執筆者：kei