Windows環境でXAMPPを利用したAngular２環境作成

新しいクラウドシステムのframework候補を選んでいて、テストで環境作成したのでメモ

１．Node.jsのダウンロードとインストール

とりあえずWindows10の64ビット版を使ってますので、Windows Installer 64-bitをダウンロードしました。

Node.jsのダウンロードはこちら

２．nvmのダウンロードとインストール

Windows版のソフトが、GitHubにありましたのでこちらをダウンロード。

nvmのダウンロードはこちら

３．XAMPPのWEBドキュメントフォルダにプロジェクトフォルダを作成

そのままXAMPPをインストールしているなら、「xampp\htdocs」がブラウザでアクセスできるフォルダになります。

今回は、「angular2」というフォルダを作成しました。

４．DOSコマンドプロンプトからコマンドを実行

１）インストールドライブに移動

Cドライブ以外にXAMPPをインストールしている場合は、コマンドプロンプトに

インストールドライブ文字を入力してEnterを押します。

２）xampp\htdocs\angular2に移動

インストールドライブに移動したら、カレントフォルダを移動します。

cd xampp\htdocs\angular2

３）npmコマンドを入力していく。

まずは初期化するコマンドを入力します。

npm init

続いて各パッケージのインストールを行うコマンドを入力します。

npm install typescript
npm install browserify
npm install angular2

４）足りないパッケージをインストール

andular2をインストールすると、「angular2  ～～  but none was installed.」などのメッセージが表示されます。

これらが足りないパッケージになるので、確認してインストールします。

今回行ったときに表示され、インストールしたのは以下の通り。

npm install es6-shim@^0.35.0
npm install reflect-metadata@0.1.2
npm install rxjs@5.0.0-beta.6
npm install zone.js@^0.6.12

５．サンプルコードを探してきてビルドする。

簡単なサンプルコードを検索してフォルダの中に作成します。

作成したら、ビルドするコマンドを入力します。

npm run build

あとは、ブラウザで表示を確認して終了です。