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にjQueryを導入する

Angular-cliの開発環境でのjQueryの導入方法を説明します。   目次1.Angular-cliの導入2.Angular2のプロジェクト作成3.jQueryのインストール4.jQ ...

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

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

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

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロント ...

Webpackを使ったWEBフロントエンド開発

Webpackとはビルドツールの1つであり、モジュール管理ツールとしての側面も持っています。フロントエンドのビルドツールとしては、他にGulpとGruntなどがありますが、それらの仲間といった感じだと ...

Angularjs2の公式チュートリアルにあるクイックスタートをテストしてみた

Angularjs2の公式チュートリアルにあるクイックスタートをテストしてみました。簡単にAngular2の開発環境を構築して、開発体験を行う事ができました。   目次1.事前準備2.作業デ ...