• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• はじめてのAngular2/再びHello World へ行く。
  • 1 (2016-07-04 (月) 08:34:47)
  • 2 (2016-07-04 (月) 12:23:11)
  • 3 (2016-07-05 (火) 23:28:43)
  • 4 (2016-07-06 (水) 03:42:31)
  • 5 (2016-07-06 (水) 13:46:52)

もういちど 5 Min Quickstart をやってみる訳†

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

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

• 5 Min Quickstart -ts（2016年7月2日の）

設定ファイルの名前を間違えてつまずく†

結論から言えば、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がインストールできない†

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

• TypeScriptの型定義管理ツールTypingsについて - Qiita
• TypeScriptの型定義ファイルを共有しよう！ - Qiita

npm startでエラーが起こる†

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をインストールし直して解決†

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のとおりにできればここでつまずくことはないです。

教訓†

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

ソースコード†

til/javascript/angular2/angular2-quickstart-r2 at master · fukuchiharuki/til