Backend Call to SAP Commerce is not triggering From My New Spartacus Setup

Question

I am new to Spartacus and I am trying to do end-to-end integration by creating one feature in myAccount Navigation. I am able to render the page and map the CMS Component to Angular Component and it displays correctly.

Now I want to call a new occ API from this component to Commerce. I have written a service where it calls the API. But I don't see the request getting triggered in the Web Browser Console. Is there any extra setup that has to be done for this

I am using Spartacus 4.3 and Hybris 2011

Below is component

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BuyAgain } from 'src/app/model/buyAgain-model';
import { BuyAgainService } from 'src/app/service/buyAgain.service';

@Component({
  selector: 'app-buyAgain',
  templateUrl: './buyAgain.component.html',
  styleUrls: ['./buyAgain.component.scss']
})
export class BuyAgainComponent implements OnInit {

  productList$: any;
  constructor(protected buyAgainService: BuyAgainService) { }
  ngOnInit(): void {
    this.productList$ = this.getAllProductsForCustomer();
  }

  getAllProductsForCustomer(): Observable<BuyAgain> {
  
    return this.buyAgainService.getCustomerOrderedProducts();
  }

}

Below is the BuyAgain Service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { OccEndpointsService } from '@spartacus/core';
import { Observable } from 'rxjs';
import { BuyAgain } from '../model/buyAgain-model';

@Injectable({
  providedIn: 'root'
})
export class BuyAgainService {

  constructor(protected http: HttpClient,
    protected occEndpoints: OccEndpointsService) { }

getCustomerOrderedProducts(): Observable<BuyAgain> {
  console.log("In Service")
  return this.http.get<BuyAgain>(
    this.getBuyAgainEndpoint()
  );
}

  protected getBuyAgainEndpoint(): string {

    return this.occEndpoints.buildUrl('buyAgainProducts');
  }

}

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { translationChunksConfig, translations } from "@spartacus/assets";
import { FeaturesConfig, I18nConfig, OccConfig, provideConfig, SiteContextConfig } from "@spartacus/core";
import { defaultCmsContentProviders,layoutConfig, mediaConfig } from "@spartacus/storefront";
import { BuyAgainModule } from '../component/buyAgain/buyAgain.module';
import { LayoutConfigurationModule } from '../confiuration/layout/layout.module';
import { ExtendServices } from '../service/extend-services.service';

@NgModule({
  declarations: [],
  imports: [
    LayoutConfigurationModule,
    ExtendServices,
    BuyAgainModule,
    HttpClientModule
  ],
  providers: [provideConfig(mediaConfig), ...defaultCmsContentProviders, provideConfig(<OccConfig>{
    backend: {
      occ: {
        baseUrl: 'https://localhost:9002/',
      }
    },
  }), provideConfig(<SiteContextConfig>{
    context: {
      currency: ['GBP', 'USD'],
      language: ['en','de'],
      baseSite: ['apparel-uk-spa', 'electronics-spa'],
      urlParameters: ['baseSite', 'language', 'currency']
    },
  }),
  provideConfig(<I18nConfig>{
    i18n: {
      resources: translations,
      chunks: translationChunksConfig,
      fallbackLang: 'en'
    },
  }),

  //***** How to Override i18n*****/
  // provideConfig({
  //   i18n: {
  //     backend: {
  //       loadPath: 'assets/i18n-assets/{{lng}}/{{ns}}.json',
  //     },
  //     chunks: translationChunksConfig,
  //   },
  // }),
  provideConfig(<FeaturesConfig>{
    features: {
      level: '4.3'
    }
  })]
})
export class SpartacusConfigurationModule { }