RXJS call with takeUntil(OnDestroy) returns cancelled from the post API

Solution for RXJS call with takeUntil(OnDestroy) returns cancelled from the post API
is Given Below:

I have added the below rxjs and the first call made is a Post. Once the takeUntil(OnDestroy) is added, the post API returns a cancelled option as below

enter image description here

enter image description here

[enter image description here3

If the takeuntil line is removed the post returns a successfule status – 204.
Why does this problem occur ?

I can recommend you this code to apply unsubscription :

@Component(...)
export class MyComponent implements OnDestroy {
  private unsubscribe: Subject; // boilerplate
  constructor(private heroService: MyApiService) {}
  public ngOnInit(): void {
    this.subscription = this.heroService
      .callSomeServerApi()
      .pipe(takeUntil(this.unsubscribe)) // boilerplate
      .subscribe(() => window.location = 'https://another.site`)
  }
  public ngOnDestroy(): void {
    this.unsubscribe.next(); // boilerplate
    this.unsubscribe.complete(); // boilerplate
  }
}