Angular Universal TransferHttpCacheModule is not working inside a route on router navigation, only after reload

Question

I have an Universal app with TransferHttpCacheModule addet to app.module.ts like that:

@NgModule({
  ...
  imports: [
    BrowserModule,
    TransferHttpCacheModule,
    AppRoutingModule,
  ],
  providers: [{ provide: APP_ID, useValue: 'serverApp' }],
  bootstrap: [AppComponent],
})
export class AppModule {}

the routes implementation:

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'ssr-test', component: HttpExampleComponent },
  ...
];

in the app.component.html I add a navigation link to reach the ssr-test path

    <li>
      <a
        routerLink="/ssr-test"
        routerLinkActive="activebutton"
        ariaCurrentWhenActive="page"
        >SSR test</a
      >
    </li>

the HttpExampleComponent template contains a <app-list></app-list> child that performs a GET call on component init:

export class ListComponent implements OnInit {
  list?: Products[];

  constructor(private apiClient: ApiClientService) {}

  ngOnInit(): void {
    this.loadList();
  }

  loadList(): void {
    this.apiClient.getList().subscribe((data) => {
      console.log('data', data);
      this.list = data;
    });
  }
  ...
}

when I navigate to the ssr-path route, the page is show correctly, but the <script id="serverApp-state" type="application/json"> tag is not present in the page source and the GET call is executed

if I reload the page the <script> is present and the GET call is not executed, but I expect the data to be present without reloading the page and no GET call to be executed

Am I missing something?

Answer 1

This is the expected behavior.

The TransferHttpCacheModule installs an Http interceptor that avoids duplicate HttpClient GET requests on the client, for requests that were already made when the application was rendered on the server side.

This is true until the app has stabilized :

export class TransferHttpCacheInterceptor implements HttpInterceptor {

  constructor(appRef: ApplicationRef, private transferState: TransferState) {
    // Stop using the cache if the application has stabilized, indicating initial rendering is
    // complete.
    appRef.isStable
      .pipe(
        filter((isStable) => isStable),
        take(1),
        tap(() => (this.isCacheActive = false)),
      )
      .subscribe();
  }
  ...
}

transfer-http-cache.interceptor.ts in the source code