Tour of Heroesというやつです。
ひっかかったのは、チュートリアル自体とは関係ない部分ですが。
作成したモジュールが認識されない
新しい.tsファイルを作成した後、開発者ツールのコンソールに、作成したファイルで定義した対象変数がundefinedのエラーが表示されました。
同時に、Node.jsのコンソールでは以下のエラーが表示(ここでは、mock-heroes.tsが新規に作成したファイル)。
…angular-tour-of-heroes/src/app/mock-heroes.ts’ is not a module.
作成したファイルのコンパイルができていなかったようです。
ng serveしたNode.js command promptでCtrl+Cを入力してng serveし直したら、コンパイルが走って認識されるようになりました。
Stack Overflowでも同様の現象に遭遇している人がいます。
https://stackoverflow.com/questions/34629517/file-app-hero-ts-is-not-a-module-error-in-the-console-where-to-store-interfac
そちらでは、Visual Studio Codeを立ち上げ直して再度コンパイルするという手順が案内されています。
RangeError: Maximum call stack size exceeded
メッセージからして自己参照っぽいなと思って、テンプレートのhtmlファイルをみたら、
<app-hero-detail [hero]=”selectedHero”></app-hero-detail>
のような記述をhero-detail.component.html内に自分で書いてました。多分何かを勘違いしたみたいですね。
該当部分を削除して解決。
ちなみに、エラーメッセージは
core.js:1598 ERROR Error: Uncaught (in promise): RangeError: Maximum call stack size exceeded
です。
ES6のTemplate literal
変数を埋め込んだ文字列
`HeroService: fetched hero id=${id}`
みたいなのがあって、たぶんidの値が実際の値に解決されて入るんだろうと思ったら、完全にそのままの形で表示。
文字列の前後にあるのが「シングルクォート」でなく「バッククォート」(自分のPCではShift+@)だった。
ES6だとTemplate literalと呼ぶそうですね。