Accessing globals from pre-rendering

[danjford]

Hi,

I've followed the steps in the documentation to put server prerendered data into an Angular 2 application.

However, even though I can see that the data is available in the window (through the console), components can't seem to access the window like in the example i.e. window.userData. When this is attempted the application complains saying that the window is not defined.

Are we meant to access the pre-rendered data in another way?

[SteveSandersonMS]

Sounds like you're trying to access window while the code is running on the server. That won't work (the window, the DOM, etc. only exists on the client).

If you want some client-only code to access this data, wrap it in a guard clause like this, so that it doesn't throw any exception while running on the server:

if (typeof window !== 'undefined') {
    // your client-only logic here
}

If you want to share some .NET-supplied data with your server-side JavaScript code, you can pass it to the boot module using the asp-prerender-data tag helper (see the docs under the heading Passing data from .NET code into JavaScript code here)

[danjford]

@SteveSandersonMS Is there a way / example of making the component prerender on the server with the data passed to it from the asp-prerender-data tag helper?

At the moment I'm trying to set it from the client side using window in the components constructor. It would probably be nicer if the component rendered onto the client side with the data already in place.

[SteveSandersonMS]

Any data you pass via asp-prerender-data will be available to your boot-server.ts function as per docs. From there, it's up to you to get it to your view components and have them use it any way you like.

In Angular 2, you could use the DI system to make it available with some arbitrary key, e.g., by adding this to the providers array in boot-server.ts:

ngCore.provide('myCustomKey', { useValue: params.data.yourValue }),

... and then receiving this as a constructor parameter in a component:

constructor(@ng.Inject('myCustomKey') myValue: any) {
    // Do something with myVaue, e.g., prepopulate the component's data properties
}

You'd also have to supply some value (or null or whatever) for myCustomKey in the DI config in your boot-client.ts bootstrapping code too.

[abhilash1990]

Hi,
We are using your template for angular2 and asp.net core.
We have tried the same thing. It's working fine and we are able to inject the data.

But the issue is when the boot-client bootstraps the app it overrides the provider data injected in the constructor.

[SteveSandersonMS]

@abhilash1990 If you think you've found a problem, could you report it as a new issue? This issue was about something else and in any case is closed now :)

[jain1anuj]

Hi Steve,

Can we use this for sending the Appsettings from server to client side also ?