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

はじめに

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

ハマった箇所

6.サーバーからデータの取得 の「HttpClientを使ってヒーローを取得する」にて、

ブラウザをリフレッシュしましょう。 ヒーローデータがモックサーバーから正しくロードされているはずです。

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

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

• ダッシュボードのTop Heroesのヒーロー4人分のボタンが表示されない（キャプチャは正しく表示されている状態）
  

• ヒーロー一覧画面のMy Heroesにてヒーローたちが表示されない（キャプチャは正しく表示されている状態）
  

何が起きていたか

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

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

sr/app/hero.service.com

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

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

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

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

原因と対応（その①）

原因

必要なモジュールをインストールする場所が悪かった。

次のコマンドを使用して、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をインストールしようとしていた。

エラーのログをよく見ると、依存の解決に失敗したと書かれています。

出力されたコンソールログ

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をインストールする。


プロジェクトディレクトリ直下のpackage.jsonを見ると、使っている@angular/commonのバージョンは 16.1.0 でした。（なのでコンソールログに出ていた「Found: @angular/common@16.2.12」については正直よくわかってないです）

※自分の環境ではこうだったという話なので、当然ここの数字は人によります。なのでここで書かれているバージョンの数字次第では、今回自分がハマった「インストールに失敗した」に遭遇しないで済む可能性もあります。

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のインストールを実行しました。

最終的にどうなったか

対応その①②を経て、

ブラウザをリフレッシュしましょう。 ヒーローデータがモックサーバーから正しくロードされているはずです。

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