Why does Angular route resolver only listen to the first value of my observable?

I am working with Angular 15 and I am trying to use the routing resolver handler to prefetch products before loading a product-list component. This product-list component simply displays the products. I am very new to stackoverflow so I'll try my best to explain my problem.
I have 4 main actors:

> ProductListComponent
> app-routing module
> ProductRouteGuard
> ProductService

The app-routing-module is my router, routing to the ProductListComponent, when the url "/products" is requested but right before loading this component, my router calls the ProductRouteGuard resolver to prefetch products before loading my ProductListComponent

My router :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

{

path: 'products', component: ProductListComponent, resolve: {products: ProductRouteGuardService}
}

<!-- end snippet -->

And then my ProductRouteGuard resolver asks my ProductService to get the products list:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

@Injectable()
export class ProductRouteGuardService{
  constructor(private productService : ProductService) { }
  resolve(){
    return this.productService.getProducts().pipe(
        map(product=> product)
      );
  }

<!-- end snippet -->

My ProductService :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

@Injectable()
export class ProductService{
  products = [...]; // array of products

  getProducts(){
      
    let products$ = from(this.products); // observable of products to simulate an api response
    return products$;
  
  }

<!-- end snippet -->

Eventually my ProductListComponent gets the data by asking the router resolver :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

export class ProductListComponent implements OnInit{
  products : any; // my component local array to display products
  constructor(private route : ActivatedRoute){}
  ngOnInit(): void {
    this.products = [this.route.snapshot.data['products']];
    console.log(this.products)
  }
}

<!-- end snippet -->

So when I run this code, I can see that only my first product is logged in the console meaning, in my opinion, the resolver is only listening the first value published by my observable. I know that in my Observable subscriber function, I could just do something like :

> observer.next(this.products);

But I really want the products all to be fetched one by one, and the resolver waiting for them to be all fetched.
My question is : How can I make the router resolver to listen to all the published values coming from my observable ?

Try the of([...]) operator instead of the from([...]) in your simulation inside the service.

More info: https://stackoverflow.com/questions/42704552/of-vs-from-operator

> It is important to note the difference between of and from when passing an array-like structure (including strings):
>
> Observable.of([1, 2, 3]).subscribe(x => console.log(x));
would print the whole array at once.
>
> On the other hand,
> Observable.from([1, 2, 3]).subscribe(x => console.log(x));
prints the elements 1 by 1.
>
>For strings the behaviour is the same, but at character level.

If you want to resolve multiple values you can use rxjs operators to put them together and resolve once:

@Injectable()
export class ProductService{
  products = [...]; // array of products
  categories = [...]; // array of categories
  getProducts(){
    return of(this.products);   
  }
  getCategories(){
    return of(this.categories);   
  }
}

@Injectable()
export class ProductRouteGuardService{
  constructor(private productService : ProductService) { }
  resolve(){
    return forkJoin([
      this.productService.getProducts()
        .pipe(map(products => products)),             
      this.productService.getCategories()
       .pipe(map(categories => categories))]);
  }
}