第2回はじめてのAngular2 ～自動インストール～

Angular2の自動インストール

1.概要

Angular2では、コマンドラインツール「Angular CLI」(CLI:Command Line Interface)を使ってインストールやビルド、テスト等をコマンドひとつで実行できます。ここでは、Angular 2.1.0を自動インストールします。
Angular CLI公式サイト　https://cli.angular.io/
2016-12-01t6-00-16-snag-0009
Angular CLIは現在ベータ版ですが現在beta-20まで改良が進み、機能が充実してきました。以降の手順はWindows OSの例です。他のOSを利用する場合は、適宜読み替えてください。

2.前提ソフトウェアのインストール

Angular-CLIの前提ソフトウェアとして、Node.js(バージョン4以上)が必要です。既に、Node.jsがインストール済みであっても、バージョンが4未満の場合は再インストールを行ってください。
1.以下のURLにアクセスします。
Node.js公式サイト　https://nodejs.org/en/
2016-12-01t5-59-53-snag-0008
2.インストーラーは安定版と最新機能版の2種類があります。「Recommended for Most Users」と記載のある安定版のインストーラーを選択してダウンロードします。
3.インストーラーを実行します。
4.ウィザードが表示されますので、デフォルト設定のままインストールを行ってください。
5.ウィザード画面に「Complete the Node.js Setup Wizard」と表示されれば、Node.jsのインストール完了です。Finishボタンをクリックしてウィザードを閉じます。
6.新規にコマンドプロンプト画面を開きます。以下のnodeコマンド(node.jsのバージョン表示)を入力して、インストールしたバージョンとの一致を確認します。

C:\>node -v
v6.9.1

7.これでnode.jsのインストールは完了です。

[参考]
node.jsは、JavaScriptをブラウザ以外で動作させる実行環境です。当初は、サーバーでの利用が目的でしたが、その後さまざまなOSやCPU環境に移植され、JavaScriptをJavaのようなクロスプラットフォーム言語に位置づける役目をしています。また、node.jsに含まれるnpm(Node Package Manager)はブラウザとnode.jsで利用するライブラリやツール等を配布・インストールする標準的な手段として使われています。Angular-CLIもJavaScriptをべースに開発されていますので、npmを使ってインストールを行い、node.js上で動作します。

3. Angular-CLIのインストール

1.コマンドプロンプトを「管理者として実行」で、開きます。
2.コマンドプロンプトに、mkdirコマンドを使ってAngular-CLIをインストールするディレクトリを作成します。ディレクトリ名は任意です。ここでは、「angularCLI」とします。
3.cdコマンドを使って、作成したディレクトリへ移動します。

C:\>mkdir angularCLI
C:\>cd angularCLI
C:\angularCLI>

3.npmのインストールコマンドを使ってangular-CLIをインストールします。「@1.0.0-beta.20-4」はインストールするプログラムのバージョン指定です。Angular-CLIは頻繁にバージョンアップしていますので、以降の解説との相違が生じないようにバージョン固定します。-gはglobalの意味で、任意のディレクトリでインストールしたコマンドを利用できます。

C:\angularCLI>npm install -g angular-cli@1.0.0-beta.20-4

4.インストールが始まります。インストールが完了してプロンプトが表示されるまで10分以上かかることもあります。途中で表示される警告文(WARN)は無視します。エラー(ERR!)表示でインストールが終了した場合は失敗ですので、同じ内容のインストールコマンドを再実行します。
5.Angular-CLIのバージョンを確認するng -vコマンドをコマンドプロンプトに入力して、動作確認をします。

[参考]
ngはAngularの2文字略語です。例えば、Angularのカンファレンスをng-confと呼びます。

C:\angularCLI>ng -v
angular-cli: 1.0.0-beta.20-4
node: 6.9.1
os: win32 x64

6.これでAngular-CLIのインストールは完了です。

4. サンプルプロジェクトの作成

1.コマンドプロンプトを「管理者として実行」して開き、Angular-CLIのインストールディレクトリに移動します。ここでは、C:\angularCLIです。
2.コマンドプロンプトに、ng new コマンドを使ってサンプルプロジェクトの生成を開始します。プロジェクト名は任意です。ここでは、「proj01」とします。

C:\angularCLI>ng new proj01
installing ng2
  create .editorconfig
  create README.md
  (以下省略)

3.プロジェクトの生成が完了してプロンプトが表示されるまで10分程度以上かかることもあります。エラー表示で終了した場合は失敗ですので、同じ内容のコマンドを再実行します。
4.プロジェクトディレクトリ(C:\angularCLI\proj01)に移動して、動作確認のためビルドを行ってみます。ng buildをコマンドプロンプトに入力します。エラーメッセージが表示れず、proj01ディレクトリ内にビルド出力先のdistディレクトリが生成していれば成功です。

C:\angularCLI>cd proj01
C:\angularCLI\proj01>ng bild
7833ms building modules
  (以下省略)

5.次に、ng serve –open コマンドを入力します。このコマンドひとつで「アプリのビルド」「Webサーバーの起動」「Webブラウザを開く」の３つの操作を自動実行します。ファイアーウォールの警告ダイアログが表示された場合は、許可します。
「It is either in use or you do not have permission.」のメッセージが表示された場合は、同一ポートを使っている他のアプリはないか、サーバーを2重に起動していないか確認します。

C:\angularCLI>cd proj01
C:\angularCLI\proj01>ng serve --open
** NG Live Development Server is running on //localhost:4200. **
 10% building modules 7/8 modules 1 active ...
  (以下省略)

node_firewall]waning

6.Webブラウザに、「loading」と表示され、その後「app works!」と表示されれば、サンプルプロジェクトの生成作業完了です。
app_works

7.ng serveコマンドは常駐してコード変更を監視し、ビルドとWebブラウザのリロードを自動実行します。終了させるには、コマンドプロンプトからCtrl+Cを入力します。

弊社では、「Angular2とTypeScriptによるモダンWeb開発セミナー」を開催します。
Angular2の実践的な知識とノウハウを習得できます。
/hp/semi/modern/

(初版)2016年8月2日
(更新)2016年12月1日

カテゴリー: Angular2