Angular5 初期設定
Angular5で「俺式KOANスタック」でWebアプリ構築するための個人的な備忘録記事。
概要については「こちら」を参照。
事前準備
- Node.js のダウンロード、インストールする（ここでは手順を割愛）
- Node.js 標準のパッケージ管理「npm」を最新化する
npm最新化コマンド
npm install -g npm
npmバージョン確認
npm -version
- 公式の構築支援ツール「angular-cli」をインストール。
ngコマンドが使える様になる
npm install -g @angular/cli
※ 本記事が古くなり、angular-cli のバージョンが上がることによって、Angular5以降のバージョンで構築されてしまう可能性があるので、その場合はご自身で対応してください
Angular バージョン確認
以下のコマンドで、Angular が「5.x」になっているか確認する（「4.x」以下であれば古い）
Angularバージョン確認
ng -v
コマンド結果
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 1.7.3
Node: 8.6.0
OS: win32 x64
Angular: 5.2.8 ← ← ← ←【ここが Angular のバージョン】
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
※ まだAngularプロジェクトが未作成で空っぽの場合は、おそらく、上記の様にズラリと結果が出ないため、その場合は気にせず次に進んでください。
プロジェクト作成
- 任意のディレクトリを作成して、その中に移動し、新規アプリプロジェクトを生成
新規プロジェクト生成
ng new 任意のプロジェクト名 --style=css --routing=true
モジュールのインストール（npm install）まで行うため、処理完了までに 3~4分ほどかかる
- オプション
-
--style：スタイル言語の指定（CSSの場合は省略可）：css,scss等 -
--routing：ルーティングモジュール付きで生成する場合：true（falseの場合は省略可）
動作確認
- 作成したディレクトリに移動し、サーバ起動
サーバ起動
cd 作成したプロジェクト名
ng serve
-
http://localhost:4200でAngularテストページが表示されたら成功。 -
Ctrl + Cでサーバ終了。
ここまでが Angular5 の標準的な初期設定。