home wiki.fukuchiharuki.me
Menu

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

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

-- ngForがどうやっても動かない、のがきっかけでしたが、結局最新のでやり直して動きました。

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

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

結論から言えば、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で安全に使う"ための型定義のようです。

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