0

I have implemented Angular Universal server-side rendering according to documentation (and examples i've found online) and can see that it is working (mostly) as I expected. My API endpoints necessary to render the initial page are all happening server-side and the data is being transferred via transferstate to client-side. The problem (or maybe I am misunderstanding) is that the html is not being "rendered" server-side.

What I mean is; Once the site loads up client-side, I see all the data as expected on screen. But if I view the page source, I see that the data transferred is inside a script tag and all the html tags are empty.

<body>
    <ng-app ng-version="7.2.15"><default-layout-shell _nghost-sc0=""><app-title _ngcontent-sc0=""></app-title><div _ngcontent-sc0="" class="c-body flex-layout-5310" fxflex="" fxlayout="column"><router-outlet _ngcontent-sc0=""></router-outlet></div><!----><!----></default-layout-shell></ng-app>
    <script type="text/javascript" src="runtime.7275e06f48d8f7974dd0.js"></script><script type="text/javascript" src="es2015-polyfills.372e85019e45b5229792.js" nomodule=""></script><script type="text/javascript" src="polyfills.d278c42f6df83350ad60.js"></script><script type="text/javascript" src="scripts.c21d5e3a7d1748ad8df9.js"></script><script type="text/javascript" src="main.0c70d781ebf571a3ab70.js"></script>
    <script id="ng-cli-app-state" type="application/json">{all-my-data-is-here}</script>
</body>

My expectation was that the actual html would have been served to the client's browser with that json script data already inserted into the html tags and ready to go. But that is not the case? Instead, some javascript has to run and insert that data into the html after the page loads client-side.

I somewhat expected that I could have potentially disabled javascript altogether, and still been able to at least see the initial page loaded with all expected data in place. Is that not correct? Or is it likely I have missed some part of implementing Angular Universal?

FirstName LastName
  • 1
  • SSR will render the HTML in NodeJS, and send the rendered result to the browser along with the *hydration* data which tells Angular how to *restore* the state that was on the server. Are you using any route resolvers? – Reactgular Feb 05 '20 at 22:23
  • Hmm, @Reactgular I am using resolvers for all routes, but nothing that would block or hinder anything really. That got me to thinking about my APP_INITIALIZER a little and I believe i've figured out my issue. I can see that somewhere in the init stages, a promise is resolved early. Seems that is the culprit. Commenting out that portion does in fact cause the site to render with all data in place within the html tags as I was expecting Universal to do. Thanks, that led me on the path to finding my issue! – FirstName LastName Feb 06 '20 at 01:39

0 Answers0