universal cache not rehydrating on 2.1.0.rc.1

[bsamartins]

Note: for support questions, please use one of these channels: https://github.com/angular/universal/blob/master/CONTRIBUTING.md#question. This repository's issues are reserved for feature requests and bug reports. Also, Preboot has moved to https://github.com/angular/preboot - please make preboot-related issues there.

• I'm submitting a ...
• [x] bug report
• [ ] feature request

• [ ] support request => Please do not submit support request here, see note at the top of this template.

• What modules are related to this Issue?

• [ ] express-engine
• [ ] grunt-prerender
• [ ] gulp-prerender
• [ ] hapi-engine
• [ ] universal-next
• [x] universal

• [ ] webpack-prerender

• Do you want to request a feature or report a bug?
  Bug

• What is the current behavior?
  Despite server state being dehydrated and loaded with page, when rehydration hook runs, window.UNIVERSAL_CACHE hasn't been set yet.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

• What is the expected behavior?
  Lifecycle hook should be able to rehydrate data bound to window

• What is the motivation / use case for changing the behavior?
  Prevents state caching

• Please tell us about your environment:

• Angular version: 2.1.0-rc.1

• Browser: [all | Chrome 55.0 | Firefox XX | IE XX | Safari XX ]
• Language: [all | TypeScript X.X | ES6/7 | ES5 ]
• OS: [all | Mac OS X | Windows | Linux ]

• Platform: [all | NodeJs | Java | PHP | .NET | Ruby]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)
  universal-script tag should be placed before client bundle script.

[MarkPieszak]

Hey @bsamartins
Do you have the lifecycle hooks setup in both your main.client & main.server NgModule's? Those are what get & set the Cache.

[bsamartins]

Hi @MarkPieszak

I have followed your recipe https://github.com/MarkPieszak/aspnetcore-angular2-universal/tree/master/Client.

When I inspect the code I can see the injected universal-script tag and the data.

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="client.bundle.js"></script>

<universal-script><script>
try {window.UNIVERSAL_CACHE = ...
</script></universal-script>

But when I effectively look at the console log I get the following error:
Angular Universal: UNIVERSAL_CACHE is missing

Could it be that window.UNIVERSAL_CACHE by the time the browser's NgModule lifecycle runs is not set, due to the universal-script being placed after the bundles?
It seems to work fine when if I hack platform-node/node-platform.js to insert the universal-script before the other script tags.

[bsamartins]

@MarkPieszak, after digging around a bit more, noticed on the Universal Starter project that the client bundle script is loaded asynchronously and manually changing the generated index.html, does the trick.

Now I just have to figure how to get angular-cli to mark the script as async.

[MarkPieszak]

Oh wow wouldn't of thought of that, glad you got it!

[ivancamilov]

@bsamartins did you figure out how to fix this using angular-cli (or rather, universal-cli)? I've been a little stuck on this very issue.

[Skillnter]

Been stuck on the same issue. Couldn't figure out the solution. Anyone can help me with this issue?

[ivancamilov]

@Skillnter the problem can be fixed as @bsamartins said, you need to make sure the client.bundle.js is loaded using async. I ended up editing the file after doing an ung build in my build process, couldn't figure out how to do it using either angular-cli or universal-cli.

[Skillnter]

@ivancamilov yeh i got that but i dunno how to load client.bundle.js using async... can u help out? I n new to it... it will be great help... thnk you in advance 😀

[ivancamilov]

@Skillnter simply edit the dist/client/index.html, look for the line where the client.bundle.js is loaded, it'll look like this:

<script type="text/javascript" src="client.bundle.js"></script>

All you have to do is edit that so that it looks like this:

<script type="text/javascript" async="" src="client.bundle.js"></script>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}