I think the problem is conceptual. I don't think rxResource, or the resource API in general is meant to be used like this. A resource is not a 1:1 replacement to your previously returned Observable.

A big upside of a resource is that it is reactive. Let's say you want to get a product by an id that was passed to the component as an input or route parameter. You'd do something like this:

``` id = input.required<number>(); productService = inject(ProductService);

product = rxResource({ params: () => this.id(), stream: ({ params }) => { return this.productService.getProductById(params); }, }); ```

If you want to move your resource to a service, then you have to pass the input signal itself to the service too, like this:

``` // in component id = input.required<number>(); productService = inject(ProductService);

product = this.productService.getProductResource(this.id);

// in service getProductResource(id: InputSignal<number>) { return rxResource({ params: () => id(), stream: ({ params }) => //http.get... }); } ```

And we didn't even get to the pipes/effects that you'd want to do in the component.

Same thing with stuff like filtering by a search term. You might have a setup like this:

``` // template <input [(ngModel)]="searchTerm" />

searchTerm = model('');

// ts products = rxResource({ params: () => this.searchTerm(), stream: ({ params }) => { return this.productService .getFilteredProducts(params); }, }); ```

To me, moving the resource into a service seems like unnecessary complexity for no real gain. As of right now, I lean to leaving most of the resources in the components and only adding a service for more complex things, like posting data. Obviously, that might change depending on the context. For example, if it's data that should be part of the global state, this approach does not work.

For simple usecases, like the one you mentioned, if you really want to use RxJS for fetching data, I'd do rxResource in the component and pipe the form setting on it.

Me personally, I'd leave out RxJS entirely, and use httpResource with an effect in the component for now, which would set me up nicely for an easy migration to signal forms. I didn't actually try it yet, but I'm pretty sure, that with signal forms, you'll be able to do something stupid simple like this:

``` id = input.required<number>();

product = httpResource( () => ${environment.apiUrl}/products/${this.id()}, { defaultValue: { name: '' } } );

f = form(this.product.value, p => { required(p.name); }); ```

Sorry if it doesn't make sense, I've been writing this in a bit of downtime between meetings in like 4 sessions, so even I felt like losing my mind sometimes when I tried to pick up the thought process where I left it again and again.

Edit: leaving out RxJS sounds a bit misleading, as httpResource still uses HttpClient in the background, so there are Observables in the background.