Angular6 + Bootstrap4でWebアプリを作ろう（ng-bootstrapのインストール）
こんにちはふるてつです。 これからAngularのプロジェクトを作ります。
プロジェクト作成前の準備
Angularでアプリケーションを作る際に必要なものといえば、まずはNode.js。
ダウンロードはこちらから
https://nodejs.org/ja/
IDEにはVisualStudioCodeを使ってます。
https://code.visualstudio.com/
みなさん同じでしょうけど、cli関連のコマンドはVSCode画面下の「ターミナル」を使ってます（赤い部分）。
プロジェクトの作成
Angular cliのインストール
npm install -g @angular/cli
私の場合すでにバージョン 5 が入っていて今回 6 にしました。
もう覚えていませんが最新を入れたく下記のコマンドを流したと思います。
npm install -g @angular/cli@latest
補足．-g はグローバルにパッケージをインストールするという意味。
パスを指定しなくてもどのディレクトリでも動くようになる感じだそう（↓に書いていました）。
https://qiita.com/standard-software/items/2ac49a409688733c90e7
プロジェクトの作成
ターミナルのカレントディレクトリをプロジェクトを作りたいパスに移動する。
アプリケーションを作成するコマンドは下記。
ng new MyApp
サーバーを起動したいときはカレントを移動し、下記コマンド --openを指定するとブラウザが起動します。
cd MyApp
ng server --open
ちなみにAngularのバージョンを知りたいときは
ng version
ng-bootstrapのインストール
今回はng-bootstrapを使います。
ngx-bootstrap というのもあり迷いましたが周りに聞くと ng-bootstrap の方がよさげとのことでした。
Bootstrap を素で使う方法もあるようでしたがそれはありません。
npm install --save @ng-bootstrap/ng-bootstrap
Bootstrap4のインストール
ng-bootstrapは入れましたが、結局Bootstrapに依存しているそうなので別途インストールしました。
下のサイトが参考になりました。
https://dev.classmethod.jp/client-side/angular6-bootstrap4/
まずBootstrap
npm install --save bootstrap
jQueryも入れます。
Popover.jsも。
両方ともBootstrapが依存していますので。
npm install --save jquery popper.js
Popover.jsはツールチップやポップオーバーで使用する位置決め用のサードパーティのライブラリファイルだそうです。
Bootstrap移行4ガイドを見ていたら書いていました。
https://cccabinet.jpn.org/bootstrap4/getting-started/introduction
さて、インストール後のわたしの環境は下記のようになりました。
package.jsonを載せておきます。
{
"name": "sanrokumaru",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@ng-bootstrap/ng-bootstrap": "^3.2.2", // この行が追加されました。
"bootstrap": "^4.1.3", // この行が追加されました。
"core-js": "^2.5.4",
"jquery": "^3.3.1", // この行が追加されました。
"npm": "^6.4.1",
"popper.js": "^1.14.4", // この行が追加されました。
"rxjs": "^6.0.0",
"to": "^0.2.9",
"update": "^0.7.4",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.7.0",
"@angular/cli": "~6.1.5",
"@angular/compiler-cli": "^6.1.0",
"@angular/language-service": "^6.1.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
大体良さそうですね。
スタイル（Bootstrap）とスクリプト（Bootstrap、jQuery、Popper）をangular.jsonに追加します。
これを追加しないと動きません。
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"sanrokumaru": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/sanrokumaru",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
{
"glob": "jquery.slim.min.js.map",
"input": "../node_modules/jquery/dist/",
"output": "./"
},
{
"glob": "popper.min.js.map",
"input": "../node_modules/popper.js/dist/umd/",
"output": "./"
},
{
"glob": "bootstrap.min.js.map",
"input": "../node_modules/bootstrap/dist/js/",
"output": "./"
},
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css", // この行を追加する
"src/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js", // この行を追加する
"node_modules/popper.js/dist/umd/popper.min.js", // この行を追加する
"node_modules/bootstrap/dist/js/bootstrap.min.js", // この行を追加する
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "sanrokumaru:build"
},
"configurations": {
"production": {
"browserTarget": "sanrokumaru:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "sanrokumaru:build"
}
},
"test": {
～～
割愛
～～
}
Bootstrapの確認
今作っている最中ですがログイン画面です。
中身は張りぼてです。
フォーカスが当たっているテキストボックスにBootstrapのスタイルが当たっているのが確認できます。
プロジェクトの作成はこれで以上になります。
ここまでの感想
ここまでで結構な時間がかかりました。
ng-bootstrapとngx-bootstrapどちらが良いのか迷ったり。
最初はng-bootstrapだけ入れていてBootstrapを入れてなかったり。
それでもログイン画面らしきものを作れたので良かったです。
今後について
今後ですがコンポーネントの分け方やログイン後の画面へのルーティングを考える予定です。
それとログイン後の画面にはナビバーをつけたいです。
あとCSSを作らないといかんなあと思っています（いまいち苦手で…）
では、ありがとうございました。
