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, 開発環境構築

執筆者:

関連記事

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

当サイトの環境環境

当サイトの投稿記事の開発環境は以下のように構成されています。 ・OS:Windows7(x64) ・WEBサーバ:IIS(Internet Information Service) ・Node.js ...

Angular2のコンポーネントについての説明

当セクションではAngular2のコンポーネントについて説明します。Angular2はコンポーネント指向なので、いつくかのコンポーネントを作成し、そららのコンポーネントを組み合わせてアプリケーションを ...

SystemJSのConfig構成について

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

angular-cliでプロジェクト作成した主要なファイルを説明

当セクションではangular-cliの「ng new」コマンドで自動作成されたプロジェクトのスケルトンの主要ファイルについて説明したいと思います。angular-cliでAngular2の開発環境を ...