angular-cliで作ったAngular2プロジェクトにng2-bootstrapを導入する
はじめに
Angular2プロジェクトを始めるときは、公式が出しているCLIツール angular-cli で
$ ng new {project-name} --style=scss
とかやるとベストプラクティスっぽいひな形を作ってくれて便利です。
--style=scssは scss を使いたい場合のオプションです。指定しなければデフォルトで css になります。
他に sass や less も指定できます。
この方法で作ったプロジェクトに ng2-bootstrap を導入する方法を紹介します。（ほとんど内容ありませんが）
1. ng2-bootstrap, bootstrap, jquery を npm install
$ npm i -S ng2-bootstrap bootstrap jquery
ng2-bootstrap は Bootstrap の機能をディレクティブやコンポーネントの形で提供してくれますが、 Bootstrap の機能自体を導入するには通常どおり bootstrap 本体と jquery が必要です。
こちら にあるように
index.htmlに CDN の URI をベタ書きしても良いのですが、ここでは angular-cli の機能をできるだけ活用するため、bootstrap, jquery とも npm で入れます。
1-2. Datepicker を使いたい場合は moment.js の型定義をインストール
$ npm i -g typings # 最初だけ
$ typings i -S moment
2. angular-cli.json に bootstrap の css, js, および jquery を追加
# ./angular-cli.json
"styles": [
+ "../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
],
"scripts": [
+ "../node_modules/jquery/dist/jquery.min.js",
+ "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
3. app.module.ts で ng2-bootstrap を追加
// ./app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
+ import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AppComponent } from './app.component';
// 略
imports: [
BrowserModule,
FormsModule,
HttpModule,
+ Ng2BootstrapModule
],
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';ではなく
import { AlertModule, ButtonsModule } from 'ng2-bootstrap/ng2-bootstrap';のように一つずつモジュールを読み込んでも構いませんが、面倒なのでここでは全部まとめて読み込んでくれる
Ng2BootstrapModuleを使っています。個別に読み込む場合は、
@NgModuleデコレーターのimports:にも全てのモジュールを追加するのを忘れないようにしましょう。
4. あとは使うだけ
以上で準備は完了なので、あとは ドキュメント を参考にしながら ng2-bootstrap を使いこなしましょう。
ちなみに
ng2-bootstrap を使わずに Bootstrap を直接導入する場合は、angular-cli の README 内の例 にあるように、angular-cli.json の styles: に bootstrap(.min).css を、scripts: に jquery(.min).js と bootstrap(.min).js を追加すれば OK です。
この場合、jquery も npm で入れるのが良いでしょう。
Discussion