Run Angular2 tutorial with angular-cli

# Angular2 tutorial を angular-cli を使ってやってみた

Angular2 を使って何かしたいのでチュートリアルをやってみようと思っていたところ、どうやら「今なら[angular-cli](https://github.com/angular/angular-cli)に乗るのがよさそう」と小耳に挟む。

というわけで、[angular-cli](https://github.com/angular/angular-cli) を導入して [Tour of Heroes](https://angular.io/docs/ts/latest/tutorial/) をやってみたのでその備忘録。

# node / angular-cli の準備
- node の導入。
  - angular-cli 自体は `Both the CLI and generated project have dependencies that require Node 4 or higher, together with NPM 3 or higher. ` とのことなので、node 6.6.2 と npm 3.10.6 を Windows で導入、PATH を設定しておく。
- angular-cli の導入と ng のためのPATHの設定 (on Windows)。
  - `npm install -g angular-cli` でインストール。
  - その後コマンド・プロンプトから `ng --help` を叩いてインストールされたか確認するが見つからない･･･。しかし `npm list -g --depth=0` でリストしてみると、`+-- angular-cli@1.0.0-beta.18` は出るのでインストールはされている模様。
  - 探してみたら [ng: command not found](https://github.com/angular/angular-cli/issues/503) を発見。`C:\Users\*User name*\AppData\Roaming\npm` 以下に確かに ng コマンドがあったので、`C:\Users\*User name*\AppData\Roaming\npm` を PATH に追加したら動いた。(要はPATHが通っていれば良い、と理解。)

# 開発環境/IDE準備
- [VisualStudioCode](https://code.visualstudio.com/)を使うべき、と思いつつ Eclipse からも離れられないので、とりあえず何かないか物色。[angular2-eclipse](https://github.com/angelozerr/angular2-eclipse)なるものを発見。いいね、と思ったらprereqが [Eclipse Neon](http://www.eclipse.org/home/index.php) だったのであわてて一緒に導入。
- Neon 導入後、[angular2-eclipse](https://github.com/angelozerr/angular2-eclipse) を導入。([install](http://marketplace.eclipse.org/marketplace-client-intro?mpc_install=3037144)アイコンをeclipse上にdrag&dropで簡単。)
  - とはいえ、code の completion などはしてくれる気配がない(設定が足らないだけかも)。

# チュートリアルをやってみる
- angular2-eclipse を導入すると、New > Project から Angular2 Project が選べるようになる。
- プロジェクト名を angular-tour-of-heroes と設定して、作成。コンソールを見ると ng init が流れて諸々のファイルが作られていることがわかる。
    - [angular2-eclipse](https://github.com/angelozerr/angular2-eclipse) を使わない場合も、結局ディレクトリを掘って `ng init` すれば同じように良きに計らってくれそう。

```console:
>ng init
installing ng2
  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\app\index.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.json
  create src\typings.d.ts
  create angular-cli.json
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
> exit
```

- あとは[The Hero Editor](https://angular.io/docs/ts/latest/tutorial/toh-pt1.html)から順番に実行。[HTTP](https://angular.io/docs/ts/latest/tutorial/toh-pt6.html) のセクションまではほぼ書いてあることに従えばいけた。

# Lessons & Learned
- [angular-cli](https://github.com/angular/angular-cli) 経由でプロジェクトを作ると、フォルダ構造がチュートリアルと異なるので自分ではまらないように注意する。
  - `angular-tour-of-heroes/src/app` の下にファイルが作成される。`angular-tour-of-heroes/app` とフォルダ直下ではない。
  - そのほかにも `system.config.js` など、いくつか「[SystemJS](https://github.com/systemjs/systemjs) を使ったチュートリアルでは作ることになっているけれども [angular-cli](https://github.com/angular/angular-cli) では自分で作らない」ファイルが存在するが、うろたえない。[angular-cli](https://github.com/angular/angular-cli) がある程度良きに計らってくれる模様。
  - [Multiple Components](https://angular.io/docs/ts/latest/tutorial/toh-pt3.html) など、Component や Service を作る場合も `ng g [component|service] <name>` を使って雛形を作ってくれる(あまつさえ `app.modules.ts` に必要な文字列を定義しておいてくれる)が、特に Component の場合 `angular-tour-of-heroes/src/app/<component-name>` など、`app` 直下に置いてくれるわけではない。`import` などは自分で path を調整する必要がある。
- [5.Routing](https://angular.io/docs/ts/latest/tutorial/toh-pt5.html)で Component に `moduleId` を指定する部分があるが、コンソールにエラーが出て大変焦る。
  - 調べる限り、[angular-cli](https://github.com/angular/angular-cli) の場合 WebPack では moduleId が不要になっている模様(https://github.com/angular/angular/issues/10626 、でも正解は不明)。
  - エラー自体は `moduleId` 自体を削れば解消できたので続行。

# Changelog
- Nov.7.2016: typo を修正(elipse -> eclipse)