Angularチュートリアルでハマった件

# はじめに
Anrularチュートリアル（Tour of Heroes）でハマったところを書きます。

# ハマった箇所
[6.サーバーからデータの取得](https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt6) の「[HttpClientを使ってヒーローを取得する](https://v17.angular.jp/tutorial/tour-of-heroes/toh-pt6#httpclient%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%92%E3%83%BC%E3%83%AD%E3%83%BC%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B)」にて、
> ブラウザをリフレッシュしましょう。 ヒーローデータがモックサーバーから正しくロードされているはずです。

正しくロードされない…。

具体的には、以下の2点です。

- ダッシュボードのTop Heroesのヒーロー4人分のボタンが表示されない（キャプチャは正しく表示されている状態）
![キャプチャ3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3873589/d1b97a2a-58df-483a-717c-636feba6ac90.jpeg)

- ヒーロー一覧画面のMy Heroesにてヒーローたちが表示されない（キャプチャは正しく表示されている状態）
![キャプチャ4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3873589/55cf1095-c490-bf50-85ba-b6fe26f912f9.jpeg)


# 何が起きていたか
ブラウザの開発者ツールのコンソールを見ると、「`api/heroes`というパスは知らん」という旨のエラーが出ていました。

心当たりと言えば、↓これへの実装変更です。
実際、HTTPからヒーロー一覧を取得しない実装だと画面には正しく表示されたので。

```TS:sr/app/hero.service.com
/** サーバーからヒーローを取得する */
getHeroes(): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
}
```

そういえばこれまでの手順でHTTPリクエストを送れるようなモジュールをインストールしてどうのこうの、というのがあったな。

それの実施時に何かやらかしたか？

という推測を立てました。

# 原因と対応（その①）
## 原因
必要なモジュールをインストールする場所が悪かった。
<br>

> 次のコマンドを使用して、npmからインメモリWeb APIパッケージをインストールします。
> `npm install angular-in-memory-web-api --save`

この手順を踏んでインストールコマンドを実行したのですが、そのコマンドをたたく場所が悪かったです。

本来であれば、__プロジェクトのルートディレクトリでインストールコマンドを実行する必要があった__ のですが、そのさらに1個上のディレクトリでインストールコマンドを実行してしまっていました。

結果、そのプロジェクトには`angular-in-memory-web-api`に対する依存が張られていない（＝使える状態になっていない）ということになっていました。

実際、チュートリアルからたどれるStackBritzの`package.json`を見ると`angular-in-memory-web-api`の記載がされていましたが、自分のプロジェクトのそれには記載が無かったです。

## 対応
プロジェクトのルートディレクトリで`npm install angular-in-memory-web-api --save`コマンドを実行する。

# 原因と対応（その②）
プロジェクトのルートディレクトリで`npm install angular-in-memory-web-api --save`コマンドを実行したのですが、インストールに失敗したと表示されました。

## 原因
互換性のないバージョンの`angular-in-memory-web-api`をインストールしようとしていた。
<br>

エラーのログをよく見ると、依存の解決に失敗したと書かれています。
```TEXT:出力されたコンソールログ
E:\develop\angular\angular-tour-of-heroes>npm install angular-in-memory-web-api --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: angular-tour-of-heroes@0.0.0
npm ERR! Found: @angular/common@16.2.12
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^16.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^17.0.0" from angular-in-memory-web-api@0.17.0
npm ERR! node_modules/angular-in-memory-web-api
npm ERR!   angular-in-memory-web-api@"~0.17.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
...
```
インストールしようとしているangular-in-memory-web-apiのバージョンと、プロジェクトで使っている@angular/commonのバージョンの相性が悪い（から依存の解決に失敗した）と書いてあるように見えます。

## 対応
@angular/commonと相性がいい（互換性がある）バージョンのangular-in-memory-web-apiをインストールする。
<br>
プロジェクトディレクトリ直下のpackage.jsonを見ると、使っている@angular/commonのバージョンは __16.1.0__ でした。（なのでコンソールログに出ていた「Found: @angular/common@16.2.12」については正直よくわかってないです）

※自分の環境ではこうだったという話なので、当然ここの数字は人によります。なのでここで書かれているバージョンの数字次第では、今回自分がハマった「インストールに失敗した」に遭遇しないで済む可能性もあります。
```JSON:package.json
{
  "name": "angular-tour-of-heroes",
  "version": "0.0.0",
  ...
  ,
  "private": true,
  "dependencies": {
    "@angular/common": "^16.1.0",
    ...
  },
  ...
}
```


このバージョンと相性のいいangular-in-memory-web-apiのバージョンを調べると、__0.16.0__ らしいです。調べたというか、Copilotに聞きました。

> @angular/common 16.1.0と互換性があるangular-in-memory-web-apiのバージョンは、0.16.0です。このバージョンをインストールすることで、依存関係の競合を避けることができます。
> 
> 以下のコマンドを実行してみてください：
> `npm install angular-in-memory-web-api@0.16.0 --save
`

提示された通り、バージョンを明確に指定したうえでangular-in-memory-web-apiのインストールを実行しました。

# 最終的にどうなったか
対応その①②を経て、
> ブラウザをリフレッシュしましょう。 ヒーローデータがモックサーバーから正しくロードされているはずです。

正しくロードされて表示されるようになりました。