はじめてのAngular2/再びHello World の変更点

追加された行はこの色です。
削除された行はこの色です。
はじめてのAngular2/再びHello World へ行く。
はじめてのAngular2/再びHello World の差分を削除
* もういちど 5 Min Quickstart をやってみる訳 [#d2e7e27c]

どうもうまくいかないことを調べているとAngular2のバージョンがalphaだったりbetaだったりrcだったりで、試してみていたのがalphaでした。バージョンが古いばっかりにうまくいかないことがあるのではもうわけがわらかなくなってしまうので、オフィシャルのQuickstartをやり直すことにしました。

&color(red){-- ngForがどうやっても動かない、のがきっかけでしたが、結局最新のでやり直して動きました。};

やり直したオフィシャルのQuickstart.

- [[5 Min Quickstart -ts>https://angular.io/docs/ts/latest/quickstart.html]]（2016年7月2日の）

* 設定ファイルの名前を間違えてつまずく [#f5a726d7]

結論から言えば、Quickstartのとおりにファイルを揃えればうまくいきます。

- アプリケーションルート/
-- app/
--- app.component.ts
--- main.ts
-- index.html
-- package.json
-- styles.css
-- systemjs.config.js
-- tsconfig.json
-- typings.json

設定ファイルを揃えてインストール。

 $ nam install

実行。

 $ npm start

** typing.jsonと間違えてtypingsがインストールできない [#h942f191]

typingsというのはd.tsを管理するツールで、d.tsとは"JavaScriptの既存ライブラリをTypeScriptで安全に使う"ための型定義のようです。

- [[TypeScriptの型定義管理ツールTypingsについて - Qiita>http://qiita.com/literalice/items/d83249a5646abcb0bec6]]
- [[TypeScriptの型定義ファイルを共有しよう！ - Qiita>http://qiita.com/vvakame/items/1980d4b6cc222e03fdcb]]

*** npm startでエラーが起こる [#q1661448]

 node_modules/@angular/core/src/application_ref.d.ts(79,88): error TS2304: Cannot find name 'Promise'.
 node_modules/@angular/core/src/application_ref.d.ts(137,42): error TS2304: Cannot find name 'Promise'.
 node_modules/@angular/core/src/application_ref.d.ts(196,33): error TS2304: Cannot find name 'Promise'.
 node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
 node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(26,16): error TS2304: Cannot find name 'Map'.
 node_modules/@angular/core/src/di/reflective_provider.d.ts(115,123): error TS2304: Cannot find name 'Map'.
 node_modules/@angular/core/src/di/reflective_provider.d.ts(115,165): error TS2304: Cannot find name 'Map'.
 node_modules/@angular/core/src/facade/async.d.ts(34,33): error TS2304: Cannot find name 'Promise'.
 node_modules/@angular/core/src/facade/async.d.ts(35,45): error TS2304: Cannot find name 'Promise'.
 node_modules/@angular/core/src/facade/collection.d.ts(1,25): error TS2304: Cannot find name 'MapConstructor'.
 node_modules/@angular/core/src/facade/collection.d.ts(2,25): error TS2304: Cannot find name 'SetConstructor'.

あと同じようなエラーがいっぱい。

*** typingsをインストールし直して解決 [#d13b9d3d]

typing.jsonをtypings.jsonに直してnpm installしても別のエラーが出て解決ならず。

 app/main.ts(1,1): error TS6053: File 'app/node_modules/angular2/typings/browser.d.ts' not found.

次の手順でtypings（で型定義ファイル）をインストールし直したところnpm startできるようになりました。

 $ ./node_modules/.bin/typings install
 
 ├── core-js (global)
 ├── jasmine (global)
 └── node (global)
 
 $

まあしかし、Qickstartのとおりにできればここでつまずくことはないです。

** 参考 [#f8869456]

- [[error TS2304: Cannot find name &#39;Promise&#39; · Issue #63 · angular/quickstar>https://github.com/angular/quickstart/issues/63]]

* 教訓 [#yc0f0e4e]

- 日本語訳に甘えるな
- よく読め

* ソースコード [#n17d4628]

[[til/javascript/angular2/angular2-quickstart-r2 at master · fukuchiharuki/til>https://github.com/fukuchiharuki/til/tree/master/javascript/angular2/angular2-quickstart-r2]]