Aspnetcore-angular-universal: Transfer Http Module and TransferStateModules in Case of Lazyloading

[naveedahmed1]

If we add TransferHttpModule to all lazy loaded modules that require http, wont we end up with multiple copies of the TransferHttp service?

[pjmagee]

Why would you add the TransferHttpModule to all lazy loaded modules when the TransferHttpModule is something encapsulated by the BrowserTransferStateModule and the ServerTransferStateModule which are both modules to run in either app.module.browser.ts or app.module.server.ts which pull in the AppModuleShared module for everything else. Shouldn't the TransferHttpModule just stay in the absolute root module?

[naveedahmed1]

@pjmagee thank you so much for your reply and explaining all this. You are absolutely right and this makes sense.

So in order to execute the http request on server, we just need to inject TransferHttp in constructor of the component, and make http request using this service when platform is server, it will automatically put the response of the http request in window.TRANSFER_CACHE, correct?

Actually I could find flow of http request from server to client in documentation, I would really appreciate if you please explain the flow?

[MarkPieszak]

Thank you @pjmagee !

Basically what happens is when you use TransferHttp for your GET requests, instead of regular Http, is that they are cached in a Service, and when the document is stabilized, we inject & serialize that object onto the window{}, which is passed down with the html / title / styles / meta back to dotnet, which then sprinkles everything through out the _layout & index.cshtml files.

Then when the client rendering happens, we have that TransferHttp call those same GETs again, but this time it populates the cache object (from the window{} we stored everything in), and when it finds a url that matches a key in the cache object, it returns that (as an Observable.of({})) to that Http call (instead of hitting the server api again), and that's it 🎁

[naveedahmed1]

Thank you so much @MarkPieszak for this excellent explanation, its awesome :)

Can you please also elaborate the purpose of @universal/ng-aspnetcore-engine, its purpose and working? Other guides such as Universal Guide on Angular CLI repo
(https://github.com/angular/angular-cli/wiki/stories-universal-rendering) don't suggest using anything like this?

Secondly, I noticed that the title and meta tags option work great for static pages but, it seems that it wont work for the pages that have dynamic titles. For example product details page that generates page title at run time.

[MarkPieszak]

I just updated the Wiki CLI guide, but that's only for Angular-CLI integration. The new PR (which hasn't been merged yet) suggests that you can use the express-engine there, instead of handling it yourself.

The ng-aspnetcore-engine is just a way to handle all of the common use-cases you'd have to handle yourself, instead of doing it all manually (which you could do as well).

If the page is truly dynamic in title, you'll just have to set the this.titleService.setTitle() yourself in the Component/etc. The app.component just has an example of letting it handle it automatically (for non super dynamic titles), all based on the data{} provided in the Route configuration.

Hope that helps!