Angular-CLI-Based-Template: Angular 5 TransferStateModule doesn't work

[naveedahmed1]

@SteveSandersonMS since the thread about new angular cli based template is too long that its seems very difficult to track each issue, I am opening this issue about Transfer State Module.

Further to our discussion,

Unfortunately, I am still unable to use Transfer State Module with this template. There is a cli based repo https://github.com/Angular-RU/angular-universal-starter , with Transfer State Module which works fine (demo here http://master-ssr.gorniv.com/back). But when we port this code to the .NetCore Angular CLI based template this no longer works and requests are rendered twice once on server and once on client.

You were rite, the &q is not an issue, because when adding transfer state and manually adding below script tag to index.html file, it is able to pick it from markup. So apparently, the issue is when script tag is added to markup.

<script id="ng-cli-universal-state" type="application/json">{&q;http://localhost:63783/api/SampleData/WeatherForecasts&q;:[{&q;dateFormatted&q;:&q;11/29/2017&q;,&q;temperatureC&q;:40,&q;summary&q;:&q;Cool&q;,&q;temperatureF&q;:103},{&q;dateFormatted&q;:&q;11/30/2017&q;,&q;temperatureC&q;:18,&q;summary&q;:&q;Chilly&q;,&q;temperatureF&q;:64},{&q;dateFormatted&q;:&q;12/1/2017&q;,&q;temperatureC&q;:-9,&q;summary&q;:&q;Cool&q;,&q;temperatureF&q;:16},{&q;dateFormatted&q;:&q;12/2/2017&q;,&q;temperatureC&q;:28,&q;summary&q;:&q;Mild&q;,&q;temperatureF&q;:82},{&q;dateFormatted&q;:&q;12/3/2017&q;,&q;temperatureC&q;:18,&q;summary&q;:&q;Cool&q;,&q;temperatureF&q;:64}]}</script>

I am quite sure there is something wrong either with this template or with aspnet-prerendering that prevents TransferState to work properly. There is another module from Universal (TransferHttpCacheModule), that automatically handles the http request caching on server which underneath uses TransferStateModule. Even that module doesn't work with this template. Here is the link to that package https://www.npmjs.com/package/@nguniversal/common

@MarkPieszak in one of our conversations in mid Nov, you mentioned about some change in AngularCompilerPlugin, which was preventing TransferState to work with https://github.com/MarkPieszak/aspnetcore-angular2-universal 5.x . Should that issue affect new .Net Core Angular cli based template as well? In our conversation you mentioned:

It is something happening at the AngularCompilerPlugin level that's not able to handle things (for our aspnet use-case) the way the previous AoTPlugin for 4.x was.
I talked with some of the guys from the CLI team and will hopefully circle back with them early next week to get it all ironed out!

[naveedahmed1]

@SteveSandersonMS finally I got it working. In browser (i.e. main.ts) we need to delay the bootstrap until the DOMContentLoaded event fires, for TransferState to work correctly.

In main.ts I replaced:

platformBrowserDynamic(providers).bootstrapModule(AppModule)
  .catch(err => console.log(err));

with

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic(providers).bootstrapModule(AppModule)
  .catch(err => console.log(err));
});

and it started work :)

[naveedahmed1]

Apparently the only thing left now is support for LazyLoading on SSR (#1413)