Angular Universal SSR TransferState only first page data available

[admin]

I've created an ApiService using the TransferState API to cache data from a wordpress:

get(url, id) {
  const key = makeStateKey(id);
  if (this.transferState.hasKey(key)) {
    const item = this.transferState.get(key, null);
    return of(item);
  } else {
    return this.http.get(url).pipe(
      map(items => {
        this.transferState.set(key, items);
        return items;
      })
    );
  }
}

Then i'm using it to get data:

this.apiService.get(environment.url + '/wp-json/wp/v2/posts').subscribe(res => {
  this.posts = res;
});

This works well, and when run, calls the API the first time, then second time is always cached.

When statically generated:

/index.html

<script id="my-app-state" type="application/json">
  <!-- top level page data -->
</script>

/posts/index.html

<script id="my-app-state" type="application/json">
  <!-- top level page data -->
  <!-- posts data -->
</script>

<ul>
<li>If I land on the exact html page /posts/index.html, the data is loaded from the TransferState cache
<a href="https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/sample-page" rel="nofollow noreferrer">https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/sample-page</a></li>
<li>If I land on /index.html, and navigate to /posts it uses html5 routes, the data is not available in the script tag. and is loaded via http instead
<a href="https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/" rel="nofollow noreferrer">https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/</a></li>
</ul>

From what I understand the reason is because you land on a real static index.html file, containing the then when navigating, all subsequent pages are not loading .html files, they are actually html5 routes /posts.

So the question is, how can I get the TransferState cache to use the from the /posts/index.html file which was statically generated?

Potential solutions:

<ul>
<li>Loading all data upfront (works, but pages are 1.1MB each)</li>
<li>Putting data into a static file which can be loaded by ajax</li>
<li>disabling html5 routing, so user hits static .html file with correct script tag</li>
<li>some undocumented angular solution??</li>
</ul>

Static generated demo:

<a href="https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/" rel="nofollow noreferrer">https://kmturley.github.io/angular-universal-wordpress-cms/frontend/dist/browser/</a>

Static generated source:

<a href="https://github.com/kmturley/angular-universal-wordpress-cms/tree/gh-pages/frontend/dist/browser" rel="nofollow noreferrer">https://github.com/kmturley/angular-universal-wordpress-cms/tree/gh-pages/frontend/dist/browser</a>

Full codebase is here:

<a href="https://github.com/kmturley/angular-universal-wordpress-cms" rel="nofollow noreferrer">https://github.com/kmturley/angular-universal-wordpress-cms</a>