title: Angular Universal SSR TransferState only first page data available
body: <p>I've created an ApiService using the TransferState API to cache data from a wordpress:</p>
  
  <pre><code>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 =&gt; {
          this.transferState.set(key, items);
          return items;
        })
      );
    }
  }
  </code></pre>
  
  <p>Then i'm using it to get data:</p>
  
  <pre><code>this.apiService.get(environment.url + '/wp-json/wp/v2/posts').subscribe(res =&gt; {
    this.posts = res;
  });
  </code></pre>
  
  <p>This works well, and when run, calls the API the first time, then second time is always cached.</p>
  
  <p>When statically generated:</p>
  
  <p>/index.html</p>
  
  <pre><code>&lt;script id="my-app-state" type="application/json"&gt;
    &lt;!-- top level page data --&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>/posts/index.html</p>
  
  <pre><code>&lt;script id="my-app-state" type="application/json"&gt;
    &lt;!-- top level page data --&gt;
    &lt;!-- posts data --&gt;
  &lt;/script&gt;
  </code></pre>
  
  <ul>
  <li><p>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></p></li>
  <li><p>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></p></li>
  </ul>
  
  <p>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.</p>
  
  <p>So the question is, how can I get the TransferState cache to use the  from the /posts/index.html file which was statically generated?</p>
  
  <p>Potential solutions:</p>
  
  <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>
  
  <p>Static generated demo:</p>
  
  <p><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></p>
  
  <p>Static generated source:</p>
  
  <p><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></p>
  
  <p>Full codebase is here:</p>
  
  <p><a href="https://github.com/kmturley/angular-universal-wordpress-cms" rel="nofollow noreferrer">https://github.com/kmturley/angular-universal-wordpress-cms</a></p>