Angular resource API: Why does loader stay in error state after params change?

We would like to try out the new resource API in Angular in combination with the new ngrx/signal-store. In production, we currently use httpResource to retrieve data from the backend. When an error is encountered, the error is returned and we can then try again.

However, we need a mock instance to test locally. To simulate the production behaviour as closely as possible, we use the resource object instead of httpResource. This works to an extent, but when we throw an error in the resource loader, the error is correctly passed on, but the application stays in the error state. Even when we try to reload or change the input signal, the error persists. How can we throw an error correctly in our case? What is the best way to do this? How can we "reset" the error state?

Here is a small example of our code:

findResource(from: Signal<string>, to: Signal<string>) {
return resource({
params: () => {
console.log('FlightService.findResource - params function called', from());
return { from: from(), to: to() };
},
loader: async ({ params }) => {
await new Promise((resolve) => setTimeout(resolve, 2000));

if (params.from === 'error') {
throw new Error('Simulated server error');
}

// Simulated data
return [
{
// ...
},
{
// ...
},
];
},
defaultValue: [],
});
}


When I enter “error,” the error is thrown, but then I can no longer change the input; the following is always returned:

Error: Resource is currently in an error state (see Error.cause for details): Simulated server error


I forked a sample repository from Manfred Steyer and adapted it to our use case: https://github.com/nclskfm/modern/pull/1/files



I would have expected the error to be returned only as long as the input is error But if the input from params changes, shouldn't the loader be executed again and exit the error status?

What would be the best way to implement this? I am grateful for any help.

Continue reading...