Angular2 開発環境構築

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

投稿日:2017年3月14日 更新日:

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

 

 

1.事前準備

事前にNode.js(npm)とgitをインストールして、使用可能な状態にして下さい。

 

2.作業ディレクトリの作成

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

 

3.プロジェクトの作成

(1)githubよりプロジェクトファイルを取得して、プロジェクト(qstart)を作成します。プロジェクトディレクトリを作成する1つ上のディレクトリで実行して下さい。

(2)取得したファイル中で開発に重要でないファイルを削除します。

(3)npmでパッケージをインストールします。

 

4.実行テスト

npmのstartコマンドでアプリケーションの実行テストを行います。

 

5.npmのスクリプト定義

package.jsonでnpmのスクリプトが定義されています。

コマンド 説明
npm start コンパイルを実行して開発用サーバを起動します。ファイルの変更を監視して自動的に再コンパイルを行います。
npm run build コンパイルを実行します。
npm run serve 開発用サーバを起動します。
npm test ユニットテストを実行します。
npm run e2e E2Eテストを実行します。

 

 

 

 

 

スポンサーリンク

スポンサーリンク

-Angular2, 開発環境構築

執筆者:

関連記事

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

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

Angular2のプロジェクト作成から開発をしてIISにデプロイまで

当セクションではAngular2のプロジェクト作成し、プロジェクト開発を行い、IISへのデプロイまでを説明したいと思います。 angular-cliでAngular2の開発環境を構築している事が前提と ...

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

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

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

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

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

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