Help us understand the problem. What is going on with this article?

angular-cli で作成したアプリに bootstrap をインストールする

More than 3 years have passed since last update.

前回からの続きで、angular-cli で作成したアプリに bootstrap をインストールするところまで

手順

グローバルスコープで参照したいので以下を参考に行う
https://github.com/angular/angular-cli#global-library-installation

早速インストールできなかったので、調査
http://stackoverflow.com/questions/39017376/angular-cli-webpack-3rd-part-css-files

angular-cli のバージョンを上げて再インストール

npm install angular-cli@latest

次に、ng new PROJECT_NAME でアプリも再構築して、bootstrap のインストール

npm install bootstrap@next --save

"bootstrap": "^4.0.0-alpha.5" が package.json に追加されます

angular-cli.json を以下のように修正

Kobito.EFLn4f.png

修正後に ng serve をすると再ビルドされて、bootstrap が使えるようになりました。

今回の sample を GitHub に push しました。
https://github.com/kkeisuke/angular-cli-sample/commit/03cf9d100572cb5219640ae9aa2c5181c5d6f5a3

その他に気づいた点

  • 最新バージョンでは構成が変わっていました。
.
├── e2e
└── src
    ├── app
    ├── assets
    └── environments
  • ng new PROJECT_NAME でリポジトリも出来るので、かなり便利

Kobito.4UVEqf.png

Could not start watchman; falling back to NodeWatcher for file system events.
kkeisuke
Web & UI エンジニア / フリーランス / TypeScript / Go / ど田舎でフルリモートワーク / 3世帯大家族 / 家業の自社システム開発・運用中
https://kkeisuke.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away