【Angular】データ取得を待ってからビューを描写したいが、エラー受信時は処理が中断してしまう

Question

やりたいこと

Angular10のHttpClinetでAPIからデータを取得し、
その取得結果を待ってからビューの描写を開始したいです。

そこで、以下を参考にして、
HttpClinetを利用してAPIからデータを取得するサービス（ScoresClientService）と、
Resolveインターフェースを実装したサービス（DetailResolverService）を作成して、
コンポーネントのルーティング前にデータ取得処理を実行するようにしました。

• Angular公式ドキュメント
• Qiita

問題

正常時は、意図した通り、データ取得を待ってからビューを描写出来ました。
しかし、HTTPエラー受信時は、処理出来ずに何も描写出来なくなってしまいました。
コンポーネント側で何も処理出来ていない状態です。

発生しているエラー

Google ChromeのDevToolのConsoleに以下のエラーが出ています。
一つ目は500エラーを受信したというメッセージなのであまり関係ないと思います。
二つ目のエラーが本事象の直接原因だと思います。
調べても分からなかったのですが、
HttpClinetはエラーの場合、HttpErrorResponseを受信するので、
それを扱えていないのではないかと推測しています。

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

core.js:4197 ERROR Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":500,"statusText":"Internal Server Error","url":"http://localhost:4200/api/scores","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:4200/api/scores: 500 Internal Server Error","error":null}
    at resolvePromise (zone.js:832)
    at resolvePromise (zone.js:784)
    at zone.js:894
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.invokeTask [as invoke] (zone.js:507)
    at invokeTask (zone.js:1671)

コード

HttpClinetを利用してAPIからデータを取得するサービス（ScoresClientService）

@Injectable({
  providedIn: 'root'
})
export class ScoresClientService {

  constructor(private httpClient: HttpClient) { }

  post(claimNumber: string): Observable<Scores> {
    // HTTPリクエストの各情報セット
    const scoresUri = environment.scores_url;
    const params = { claimNumber: claimNumber };
    const headers = { 'Content-Type': 'application/json' };

    // スコア詳細を取得し、取得結果を呼び出し元に返す
    return this.httpClient.post<Scores>(scoresUri, params, { headers: headers });
  }
}

Resolveインターフェースを実装したサービス（DetailResolverService）

@Injectable({
  providedIn: 'root'
})
export class DetailResolverService implements Resolve<Scores> {

  constructor(private client: ScoresClientService) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Scores> {
    const claimNumber = route.paramMap.get('claimNumber');
    return this.client.post(claimNumber);
  }
}

ルーティング設定（app-routing.module.tsの一部抜粋）

const routes: Routes = [
  {
    path: 'detail/:claimNumber',
    component: DetailComponent,
    resolve: {
      detail: DetailResolverService
    }
  }
];

コンポーネント（DetailComponentの一部抜粋）

constructor(private route: ActivatedRoute)
  ) { }

this.route.data.subscribe(
      response => {（省略）
      }, error => {（省略）

確認したこと

• DetailResolverServiceを使わないで、コンポーネントから直接ScoresClientServiceを呼び出せば、

HTTPエラー受信時も正常に処理できる。
（その代わり、データ取得を待ってから描写を開始できなくなる）

• DetailResolverServiceはScoresClientServiceからObservableを受け取っている。

以下のようにDetailResolverServiceを書き換えると、console.log(response)でObservableのオブジェクトを出力できる。
（try catchに意味はないです。あわよくばcatchしてエラーページに飛ばせないか考えましたが、出来ませんでした）

• HTTPエラー500以外のエラー（400)でも本事象が発生すること。

@Injectable({
  providedIn: 'root'
})
export class DetailResolverService implements Resolve<any> {

  constructor(private client: ScoresClientService, private router: Router) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    const claimNumber = route.paramMap.get('claimNumber');
    try {
      const response = this.client.post(claimNumber);
      console.log('受信確認');
      console.log(response)
      return response;
    } catch(e) {
      this.router.navigate(['/list/error']);
    }
  }
}

以上です。

何か気づくことがあればご教授下さい。
理想はObservableをDetailComponentに渡せれば良いのですが、
出来なければ、DetailResolverServiceでエラーハンドリングして、
HTTPエラー受信時にはエラーページに飛ばすでも良いと思っていますが、
その方法も分からなかったので、もし分かる方がいらっしゃればご教授頂きたいです。

宜しくお願い致します。

Answer 1

Resolveインターフェースを実装したサービスからエラー（のObservable）を返すことは出来ない？ようで、
DetailResolverServiceでエラーハンドリングでエラーハンドリングする方法で解決しました。

参考までにコードを貼っておきます。
なお、DetailResolverServiceではコメントアウトしていますが、エラーページにリダイレクトもできます。（こちらの方が一般的だと思います。）

@Injectable({
  providedIn: 'root'
})
export class DetailResolverService implements Resolve<Scores> {

  constructor(private client: ScoresClientService, private router: Router) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Scores> {
    const claimNumber = route.paramMap.get('claimNumber');
    return this.client.post(claimNumber)
    .pipe(
      catchError(error => {
        // this.router.navigate(['/list/error']);
        // return EMPTY;
        return of(null);
      }));
  }
}

constructor(private route: ActivatedRoute)
  ) { }

this.route.data.subscribe(
      response => {
        if (!response.detail) {
          （エラー時の処理）
          return;
        }
        （正常時の処理）
      }, error => {（省略）