Angular2 基本練習

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

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

angular-cliのngコマンドについて説明したいと思います。

コマンド 説明
ng new アプリ(プロジェクト)の雛型を作成します。
ng serve プロジェクトをビルドして、開発用のWEBサーバの起動します。アプリの開発、デバッグ、テストを行います。
ng build 製品版のビルド。JavaScriptなどのファイルをひとまとめにします。
ng generate component コンポーネントの雛形を作成します。
ng test テスト機能を実現します。
ng help ヘルプを表示します。
ng version バージョンを表示します。

 

 

1.ng newコマンド

アプリ(プロジェクト)の雛型を作成します。

ng new [プロジェクト名]で実行します。実行ディレクトの配下にプロジェクト名のフォルダが作成され、その中に雛型ファイルが作成されます。

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

 

2.ng serveコマンド

プロジェクトをビルドして、開発用のWEBサーバの起動します。「http://localhost:4200」にアクセスして、アプリの開発、デバッグ、テストを行います。

 

3.ng buildコマンド

製品版のビルドを実行します。JavaScriptなどのファイルをひとまとめにします。ビルド結果は、distディレクトリに出力されます。

オプション 説明
--prod 製品版のビルドを指示します。
--bh distディレクトリ中に作成されるindex.htmlのbaseタグのhref属性値を設定します。

実行例(ホスト名/ng2test/sample1でアプリが実行される場合)

デプロイの方法は、「Angular2のプロジェクト作成からデプロイまで」を参考にして下さい。

 

4.ng generate componentコマンド

ng generate component [コンポーネント名] の実行で、コンポーネントの雛型を作成します。

 

5.ng testコマンド

テスト機能を実現します。

 

6.ng helpコマンド

ヘルプを表示します。

7.ng versionコマンド

バージョンを表示します。

 

スポンサーリンク

スポンサーリンク

-Angular2, 基本練習

執筆者:

関連記事

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

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

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

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

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

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

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

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

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

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