Question: how should the Angular app know about information from C#?

[uber5001]

I've got a connectionString (called ApiHost in this case) in appsettings.json that I need my Angular app to know about. Right now, I'm just trying to make that string show up in the home component, or anywhere as part of the Angular app.

I've figured out how to get that information on the c# side of things, but I don't know how to transfer that information down to the app.

I've tried to pass it down through the "TransferData concept":

(HomeController.cs:45) - pass info to "transferData concept"
        var prerenderResult = await Prerenderer.RenderToString(
            "/",
            nodeServices,
            new JavaScriptModuleExport(applicationBasePath + "/Client/dist/main-server"),
            unencodedAbsoluteUrl,
            unencodedPathAndQuery,
            new { ApiHost = Configuration.GetConnectionString("ApiHost") },
            30000,
            Request.PathBase.ToString()
        );
(main.server.aot.ts/main.server.ts:28) - create a script from ALL params 
      return ngAspnetCoreEngine(setupOptions).then(response => {
        // Apply your transferData to response.globals
          response.globals.transferData = createTransferScript(params.data);

This data shows up in window.TRANSFER_DATA['ApiHost']. I can't figure out how to get access to this data, since Angular Universal doesn't allow access to window.

I tried to inject TransferHttp from TransferHttpModule to call getFromCache(key): any but it is considered private.

What's the expected way to transfer data to the Angular app in this project?

[TimHarker]

Good question. I've seen many ways to do it in my research, but what's the best?

And in lieu of turning off SSR. What now? Just put a script tag in place of ViewData["TransferData"] and roll your own window['TRANSFER_CACHE']?

Also, this way of "transferring" data doesn't use a const like Angular 1 does, angular.module('app').constant('LOGGING_API', '@ConfigurationManager.AppSettings["LOGGING_API"]');. You can change the values client-side???

[uber5001]

There seems to be both a window.TRANSFER_STATE and a window.TRANSFER_CACHE used. A quick search through the project for TRANSFER_CACHE says that it is only written to, and never read. Were these supposed to be one and the same?

[uber5001]

If I change this to TRANSFER_CACHE instead...

(browser-transfer-state.module.ts:4)
export function getTransferState(): TransferState {
  const transferState = new TransferState();
  transferState.initialize(window['TRANSFER_CACHE'] || {}); //used to be TRANSFER_STATE
  return transferState;
}

and I inject TransferState into any component:

(home.component.ts)
...
import { TransferState } from '../../../modules/transfer-state/transfer-state';
...
constructor(..., private transferState: TransferState) { }

I can now access the data I passed via transferState.get.

However, this little hack I've done doesn't change anything in server-transfer-state, so I only have my apiHost data during the browser render (which is probably fine for my specific use case, but not all cases).

[MarkPieszak]

Hey, yes so they are actually just used for two different occasions, but similar things. It might be best to either combine them somehow or set up the get TransferCache service, just left it blank figuring people could copy the TransferState way of doing it.

So TransferState is specifically for re-using Http calls from server to client render (as it reuses them automatically on the client then deletes the key value).

The other was just for everything else you might transfer and it populates it separately using the createTransferScript as you have above.

But you may be on to something, it might be helpful to have the window.TransferCache object be prepopulated INTO TransferState so it's retrieved the exact same way! Thanks for pointing all this out 👍🎈

[JohnGalt1717]

I think I missed something. In the past with the javascriptservices version I could do this in my boot-server.ts:

return new Promise<RenderResult>((resolve, reject) => { const requestZone = Zone.current.fork({ name: 'angular-universal request', properties: { ngModule: AppModule, baseUrl: '/', requestUrl: params.url, originUrl: params.origin, preboot: false, document: '<app></app>', ServiceUrl: params.data.serviceUrl, Url: params.data.url, ClientId: params.data.clientId }, onHandleError: (parentZone, currentZone, targetZone, error) => { // If any error occurs while rendering the module, reject the whole operation reject(error); return true; } });

And then access the values like this: Zone.current.get("Url")

But now with this in main.server.ts and main.server.aot.ts

' response.globals.transferData = createTransferScript({
someData: 'Transfer this to the client on the window.TRANSFER_CACHE {} object',
serviceUrl: params.data.serviceUrl,
url: params.data.url,
clientId: params.data.clientId
});
'

this no longer works on the server side which I need to be able to get so that http requests etc. can know where the service url is at.

How does one get the values that were passed from a .net controller to the server side rendering? (i.e. I need to be able to get it both server side and client side)

Thanks!

[JohnGalt1717]

Just fyi: The bottom post by me on this thread will help you. It isn't perfect but it works: #260

[isaacrlevin]

Hey John, can we close this one? Or is there FAQ needed?

[JohnGalt1717]

an FAQ is definitely needed. It is VERY not obvious how this is supposed to work.

[MarkPieszak]

I made a write-up here, but I'll make sure to link to it & update it with the upcoming improvements coming along 👍

Also need to try to make the HomeController not as confusing, actually use the aspnetcore-engine, and pull out Transfer from inside the project as well (and use one that involves HttpInterceptors). Plenty to do :)

https://github.com/angular/universal/tree/master/modules/ng-aspnetcore-engine

[isaacrlevin]

@MarkPieszak bump for update. Can you add that documentation to the readme?

[TimHarker]

Working link from MarkPieszak above...
https://github.com/angular/universal/tree/master/modules/aspnetcore-engine.

[ericmahlberg]

I'm looking for a way to do this in Asp.Net Core 2.1+. Since there is no longer a HomeController and associated Index.cshtml to plug the data in, is there any guidance on how to adjust what's been presented in the how to above (or another how to on what to do to bring those files back and not affect the rest of the asp.net modifications in 2.1+)?