Angular CLIによる開発環境の構築、Webアプリのプロジェクト作成から実行までの手順をまとめました。 現時点の最新版「Angular 4」を対象としています。
Angular CLIを使用すると、Webアプリを簡単に作成・実行できるだけでなく、各種ファイルの自動生成やテスト、本番環境向けの最適化など、開発に必要な作業を効率良く行えます。
必要な環境
Angular CLIを使用するためには、Node.jsとnpmが必要です。
- Node.js: 6.9.x以上
- npm: 3.x.x以上
Node.jsとnpmのバージョン確認
既にインストール済みの場合は、Angular CLIに対応したバージョンか確認します。
$ node -v v6.10.2 $ npm -v 4.5.0
Node.jsのインストール・アップデート
Mac用のNode.jsバージョン管理ツール「nodebrew」を用いたインストール、アップデート方法は以下の記事にまとめています。
Angular CLIのインストール
はじめてインストールする場合
$ npm install -g @angular/cli
古いCLIがインストール済みの場合
Angular 2用の「angular-cli」からパッケージ名が変更されています。 インストール済みの場合は旧版を削除して新しいCLIをインストールします。
$ npm uninstall -g angular-cli $ npm install -g @angular/cli
動作確認
Angular CLIが正常にインストールされ、「ng」コマンドが使えるようになったことを確認します。
$ ng version
ヘルプ
ngコマンドの使用方法やオプションは、ヘルプで確認できます。
すべてのコマンドを表示
$ ng help
特定のコマンドを表示
「ng help」に続けて対象のコマンドを指定します。 （プロジェクト作成の「new」コマンドを調べる例）
$ ng help new
プロジェクトの作成
Webアプリのプロジェクトを作成します。
$ ng new プロジェクト名
例えば下記コマンドを実行すると、カレントディレクトリ内に「my-app」ディレクトリが作成され、Webアプリを構成するソースや各種設定ファイルの作成、必要なパッケージのインストールが自動的に行われます。
$ ng new my-app installing ng create .editorconfig create README.md create src/app/app.component.css create src/app/app.component.html create src/app/app.component.spec.ts create src/app/app.component.ts create src/app/app.module.ts create src/assets/.gitkeep create src/environments/environment.prod.ts create src/environments/environment.ts create src/favicon.ico create src/index.html create src/main.ts create src/polyfills.ts create src/styles.css create src/test.ts create src/tsconfig.app.json create src/tsconfig.spec.json create src/typings.d.ts create .angular-cli.json create e2e/app.e2e-spec.ts create e2e/app.po.ts create e2e/tsconfig.e2e.json create .gitignore create karma.conf.js create package.json create protractor.conf.js create tsconfig.json create tslint.json Successfully initialized git. Installing packages for tooling via npm. Installed packages for tooling via npm. Project 'my-app' successfully created.
オプション
「ng help new」にて、プロジェクト作成時のオプションが確認できます。 便利なものを3つ紹介します。
skip-install
Angular本体をはじめとする各種パッケージのインストールを行わずに、ソース・設定ファイルの生成のみ行います。 対象パッケージの確認・変更後にインストールする場合に使用します。
短時間で完了するので、「ng new」コマンドのオプションを試す場合にも便利です。
Webアプリの実行前に「npm install」によるパッケージの手動インストールが必要です。
例
$ ng new my-app --skip-install $ cd my-app $ npm install
source-dir
ソースファイルの格納先ディレクトリ（デフォルト: src）を変更します。
例
$ ng new my-app --source-dir src/client
installing ng
create .editorconfig
create README.md
create src/client/app/app.component.css
create src/client/app/app.component.html
create src/client/app/app.component.spec.ts
create src/client/app/app.component.ts
create src/client/app/app.module.ts
〜
この例では、「my-app/src/client」内にAngular用のソースが格納されます。 サーバーサイドのソースと分けて管理する場合などに便利です。 （「my-app/src/server」など）
style
Angular CLIでスタイルシートを作成する際の拡張子（デフォルト: css）を変更します。
$ ng new my-app --style scss
installing ng
create .editorconfig
create README.md
create src/app/app.component.scss
〜
Webアプリの実行・表示
作成したWebアプリを実行します。
プロジェクトディレクトリに移動して起動コマンドを実行します。
$ cd my-app $ ng serve --open
オプション「open」により、ブラウザの起動とページ表示が自動的に行われます。
デフォルトの設定では4200番ポートで起動しますので、手動で表示する場合は「http://localhost:4200/」にアクセスします。
この状態でソースを変更すると、ページが自動的にリロードされます。
Webアプリを停止する際は[control] + [C]キーを押します。
あると便利なソフト
Chrome（Webブラウザ）
Webアプリの開発時に役立つ「デベロッパー ツール」が搭載されており、アプリの状態（エラーメッセージ、Angularによって動的に変化するページの要素や変数、ストレージなど）の確認・操作が行えます。
Windowsの場合は[F12]キー、Macの場合は[command] + [option] + [I]キーでデベロッパー ツールを起動できます。
Visual Studio Code（テキストエディタ）
Microsoftが無償で提供するエディタで、Webアプリの開発時に必要なHTML、CSS、JavaScriptなどのシンタックスハイライト・候補表示に対応しています。
AngularのデファクトスタンダードであるTypeScriptにも対応しており、拡張機能を追加すれば更に開発効率を高めることも可能です。
まとめ
Angular CLIを使用すれば、Webアプリの作成と実行が簡単に行えます。
今後、CLIを活用した具体的な開発方法をまとめていければと思います。