Angular2 開発環境構築

Angular2の開発環境を構築(angular-cli)

投稿日:2017年2月24日 更新日:

Angular2の開発環境をangular-cliで構築して、テストプロジェクト作成して実行テストまでを行います。

当サイトはangular-cliでAngular2を開発します。angular-cliはAngular2のCLI開発環境が整備されている開発ツールです。雛形の自動生成、更新ファイルを自動ロードなどの機能が含まれています。angular-cliを導入せず、gulpだgruntだ・・・などを組み合わせて開発環境を構築する事は可能ですが、angular-cliを導入するだけで様々な開発環境が一度に構築できます。初心者の方はこちらの方をお勧めします。

当サイトの実行環境はWindows7(x64)です。

 

1.Node.jsのインストール

angular-cli導入にはNode.jsが必要になるため、最初にNode.jsをインストールします。

Node.jsはサーバー・サイドの JavaScriptの実行環境を言われていますが、最初の方はピンとこないと思います。angular-cli(Angular2)を動作させるための必要な実行環境と考えれば良いと思います。あと、npm(プロジェクト管理ツール)を使うためにもNode.jsが必要になります。

下記のサイトから最新のインストーラをダウンロードし、実行するだけでOKです。難しい事はありませんでした。

(注意点)

古いNode.jsがインストールされている場合は最新に変更してください。古いバージョンだとangular-cli導入時にエラーになって正常な開発環境が構築出来ないようです。

2017年02月時点では以下のように記載されていました。

Prerequisites

Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.

引用元:https://github.com/angular/angular-cli#prerequisites

(1)Node.jsのインストーラをダウンロードします。当サイトではバージョン6.9.4ですが、実際は最新のバージョンで大丈夫だと思います。

(2)インストーラを実行します

(3)ウィザードに従ってデフォルトでインストールします。

(4)コマンドプロンプトでバージョン確認を行います。

 

2.angular-cliのインストール

続いて、npmでangular-cliをインストールします。

(1)コマンドプロンプトより、「npm install -g angular-cli」と入力して、グローバルインストールを実行します。

(2)インストール後はngコマンドでバージョン確認を行います。コマンドプロンプトより、「ng -v」と入力して実行します。

 

3.プロジェクトを作成して実行テスト

プロジェクト雛型を作成して、実行テストを行います。

(1)作業ディレクトリを作成します。当サイトでは作業ディレクトリとして、C:\ng2testを作成します。作成後、C:\ng2testディレクトリに移動します。コマンドプロンプトより、「mkdir ng2test」と入力して実行します。「cd ng2test」と入力して実行します。

(2)ng new コマンドを使用して、プロジェクト名「sample1」のプロジェクト雛型(スケルトン)を作成します。

実行後の画面です。

sample1フォルダが作成され、プロジェクト雛型ファイルが作成されます。

(3)sanple1ディレクトリに移動します。ngコマンド 「server」を使用して、コンパイル&実行します。

実行後の画面です。開発用のWEBサーバが自動起動します。

(4)ブラウザを起動して、アドレスバーに「http://localhost:4200」を入力して実行テストを行います。下図のようになったら成功です。

 

4.ngコマンドについて

ngコマンドは『Angular-cliのngコマンドの説明』を参考にして下さい。

 

 

スポンサーリンク

スポンサーリンク

-Angular2, 開発環境構築

執筆者:

関連記事

Angular-cliにng2-bootstrapを導入する

Angular2の開発でbootstrapを使用するにはng2-bootsrapを導入します。ng2-bootsrapはbootstrapの機能をディレクティブやコンポーネントとして提供してくれます。 ...

SystemJSのConfig構成について

SystemJSのConfig構成はsystemjs.config.jsファイルで設定される事が多いと思います。今回はAngular2の公式チュートリアルにあるクイックスタートで使用されているsyst ...

TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する

当セクションではTypeScript、Lite-Serverのパッケージを使った超簡単なWEBフロントエンドの開発環境の構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用しま ...

TypeScriptとSystemJSを使ったWEBフロントエンド開発

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介し ...

Angular-cliのngコマンドの説明

angular-cliのngコマンドについて説明したいと思います。 コマンド 説明 ng new アプリ(プロジェクト)の雛型を作成します。 ng serve プロジェクトをビルドして、開発用のWEB ...