[SOLVED] Access to the error message of an angular 19 resource

Access to the error message of an angular 19 resource

I'm using angular 19. I'm using the new resources to load data like so :

// Skipping imports and decorators for simplicity
export class ApiService {
  http = inject(HttpClient);

  public myResource = rxResource<MyThing[], void>({
    loader: () => this.getMyThing(),
    defaultValue: [],
  })

  private getMyThing(): Observable<MyThing[]> {
    return this.http.get<MyThing[]>(`${environment.apiBaseUrl}/mything/`);
  }
}

When put my backend offline and I try to access this resource's error() like so :

export class MyThingComponent {
  public myResource = inject(ApiService).myResource;

  constructor() {
    effect(() => {
      console.log(this.myResource.error())
    })
  }
}

It shows an error object, that have the following properties :

{
  "headers": {
    "headers": {},
    "normalizedNames": {},
    "lazyUpdate": null
  },
  "status": 0,
  "statusText": "Unknown Error",
  "url": "http://127.0.0.1:8000/mything/",
  "ok": false,
  "name": "HttpErrorResponse",
  "message": "Http failure response for http://127.0.0.1:8000/mything/: 0 Unknown Error",
  "error": {
    "isTrusted": true
  }
}

But when I try to access the error's message, the CLI complains about something I don't understand :

effect(() => {
  console.log(this.myResource.error()?.message);
})

Error :

X [ERROR] TS2339: Property 'message' does not exist on type '{}'. [plugin angular-compiler]
      23 │       console.log(this.myResource.error()?.message);
         ╵                                                     ~~~~~~~

It seems to me like the implementation of the types is incomplete, because when I go see the source code I see this :

/**
 * When in the `error` state, this returns the last known error from the `Resource`.
 */
readonly error: Signal<unknown>;

Do you know a solution for this problem ? Or do I need to raise the issue in the Angular issue board ?

Solution

You have to type cast it to HttpErrorResponse, until the error signal gets typed in the future.

import { HttpErrorResponse } from '@angular/common/http';

export class SomeComponent {

  constructor() {
    effect(() => {
      const error = this.myResource.error() as HttpErrorResponse;
      console.log(error?.message);
    });
  }
  ...