【Angular2】angualr-cliで生成したプロジェクトに新しいモジュールを追加するときの設定

10cmです｡こんにちは｡

angular-cliをインストールできていない方､そもそもangular-cliを知らない方は以下のページを参考にしてみてください｡

【Angular2】Macに開発環境を構築してみた - Sierですが何か?

今回は､例としてbootstrapを使えるようにしてみたいと思います｡

##bootstrapのインストール
まずはプロジェクトのルートディレクトリに移動します｡
ルートディレクトリに移動したら､次のコマンドを入力します｡

 $ npm install bootstrap

node_modulesの下にbootstrapがインストールされます｡

angular-cli.jsonの修正

bootstrapのインストールが完了したら､それを使用できるように設定する必要があります｡

angular-cliのプロジェクト上で使えるようにするには'angular-cli.json'ファイルにある'apps'を､次のように修正します｡

       ･･･
       ･･･
       ･･･
  "apps": [
    {
      "styles": [
        "styles.css",
		"../node_modules/bootstrap/dist/css/bootstrap.min.css",
		"../node_modules/bootstrap/dist/css/bootstrap-theme.min.css"		
      ],
      "scripts": [
		"../node_modules/jquery/dist/jquery.min.js",
		"../node_modules/bootstrap/dist/js/bootstrap.min.js"
	  ],
       ･･･
       ･･･
       ･･･

上記のように､scriptファイルは'scripts'オブジェクトに､cssファイルは'styles'オブジェクトにそれぞれファイルパスを記述します｡このとき､'src'を基準にパスを記述する必要があります｡