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 の標準的な初期設定。

次に、KOANを前提としたフロントエンドの構築をする

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.