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 ?

Continue reading...