rxjs publishReplay with windowTime parameter reseting - rxjs

Question

I'm trying to limit the time subscriptions are cached in rxjs. Previously the caching was done with pipe(publishReplay(1), refCount()). After finding this nice answer and reading the docs, I found out that this cache time can be limited by passing a second parameter to publishReplay.
Example: publishReplay(1, 60 * 1000)
I tried to make a minimal example:
<button (click)="test()">Test</button>
JS:
urlofApi = "https://api.github.com/search/repositories?q=helloWorld";
testX = this.http.get(this.urlofApi).pipe(
tap(() => console.log("called")),
publishReplay(1, 5),
refCount()
);
constructor(private http: HttpClient) {}
test() {
const x = this.testX.subscribe();
}
See: https://stackblitz.com/edit/angular-ivy-z7ecyn?file=src%2Fapp%2Fapp.component.ts
However the reslt is not discareded after 5ms, but held indefinitly. What am I missing?

Answer 1

After 3 Hours of debugging, I found the following answer: https://stackoverflow.com/a/54957061
All I had to do, was add a take(1) at the end.
New example:
testX = this.http.get(this.urlofApi).pipe(
tap(() => console.log("called")),
publishReplay(1, 5),
refCount(),
take(1)
);
StackBlitz: https://stackblitz.com/edit/angular-ivy-tyrbdw?file=src%2Fapp%2Fapp.component.ts
Full example:
import { Component, VERSION } from "#angular/core";
import { publishReplay, refCount, take, tap } from "rxjs/operators";
import { HttpClient } from "#angular/common/http";
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
urlofApi = "https://api.github.com/search/repositories?q=helloWorld";
testX = this.http.get(this.urlofApi).pipe(
tap(() =>
console.log(
`++ api was newly called at ${new Date().toLocaleTimeString()} ++`
)
),
publishReplay(1, 5000),
refCount(),
take(1)
);
constructor(private http: HttpClient) {}
test() {
console.log("Requesting data from API");
this.testX.pipe(take(1)).subscribe(() => console.log("completed"));
}
}