Run Angular2 tutorial with angular-cli

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

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

というわけで、angular-cli を導入して Tour of Heroes をやってみたのでその備忘録。

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 を発見。C:\Users\*User name*\AppData\Roaming\npm 以下に確かに ng コマンドがあったので、C:\Users\*User name*\AppData\Roaming\npm を PATH に追加したら動いた。(要はPATHが通っていれば良い、と理解。)

開発環境/IDE準備

• VisualStudioCodeを使うべき、と思いつつ Eclipse からも離れられないので、とりあえず何かないか物色。angular2-eclipseなるものを発見。いいね、と思ったらprereqが Eclipse Neon だったのであわてて一緒に導入。
• Neon 導入後、angular2-eclipse を導入。(installアイコンをeclipse上にdrag&dropで簡単。)
  • とはいえ、code の completion などはしてくれる気配がない(設定が足らないだけかも)。

チュートリアルをやってみる

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

>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から順番に実行。HTTP のセクションまではほぼ書いてあることに従えばいけた。

Lessons & Learned

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

Changelog

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