Why are my endpoints not firing in the interval it's subscribed to?

Issue

I have a component with the constructor as the following:

  constructor( myService: MyService, @Inject(APP_DEPLOY_URL) public appDeployUrl: string) {
    this.myService = myService;
    var a = 1

    this.subscription = interval(5000).subscribe(() => {
      this.name$ = this.myService.GetName$({});

      console.log(a + "==============")
      this.language$ = this.myService.GetLanguage$({});

      console.log("ccc")

      this.address$ = this.myService.GetAddress$({});
      console.log("aaaa")

      this.age$ = this.myService.GetAge$({});
      console.log("ddd")
      a+=1
    })
  }

And when I check the console, it looks like the code in the interval is working as expected:

But the endpoints are not firing. They're not seen in the network tab. However, if I create a button that fires one of the endpoints on the button's onclick() method, the endpoint fires correctly and the network tab notes that the related API has been fired.

Why are my endpoints not firing every 5 seconds?

Solution

Well, while I do not see your service methods I assume that the return type is an Observable from the $ sign you are putting there. Because Http verbs from Angular HttpClientModule return Observables, you need to .subscribe() to those Observables to get the notification from your API endpoints.

In what you shared, while you are correctly putting them inside the RxJS operator you are not listening to the changes that the notifier might broadcast. So subscribe to your methods inside your RxJS operator and you should see them firing in the network tab.

So add .subscribe()

products$ = this.service.getProducts({}).subscribe()

Answered By - onrails