Pass data from .NET code into TypeScript code

[JCPuerto]

Greetings,

This is related to the Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-preview1-final angular template.

In the Use the Angular project template page it says : "For example, see how main.server.ts passes the BASE_URL value to any component whose constructor is declared to receive it".

In the recently created file main.server.ts in the extraProviders section there's this { provide: 'BASE_URL', useValue: params.origin + params.baseUrl } line and I thought all I needed to do is create another entry like that one. However, it seems that the BASE_URL provider is actually ignored and is actually taken from the existing main.ts file. I could delete that provider in main.server.ts and nothing happens. If I delete the provider in the main.ts I get a No provider for BASE_URL error.

So could you please show us an example to get a custom value sent from .NET like the one you suggested in the article; data["isHttpsRequest"] = context.Request.IsHttps; ?.

Thank you very much!

Good work by the way. We really appreciated!

[SteveSandersonMS]

I thought all I needed to do is create another entry like that one. However, it seems that the BASE_URL provider is actually ignored and is actually taken from the existing main.ts file. I could delete that provider in main.server.ts and nothing happens. If I delete the provider in the main.ts I get a No provider for BASE_URL error.

Under SSR, the code only uses main.server.ts. It doesn't use main.ts at all. Also it could never work if it took the value from main.ts because that relies on DOM APIs that don't exist when running under Node. So I think you must be mistaken about this. Perhaps you didn't recompile the application after making the change, or didn't save the change or something unexpected like that.

Of course, it also uses the value from main.ts when it starts running client-side. So for any new DI tokens you create, you'll need entries in both main.server.ts (for SSR execution) and main.ts (for client-side execution).

So could you please show us an example to get a custom value sent from .NET like the one you suggested in the article; data["isHttpsRequest"] = context.Request.IsHttps; ?.

The existing BASE_URL example really is a complete example of how to do that. If you duplicate all the uses of BASE_URL but replacing the string BASE_URL with some other value, then you will have duplicated the behaviour of passing a value from main.server.ts into an Angular component. There's nothing else to it than that.

I'm not sure what went wrong when you tried it, but if you try again and can reproduce it not working, could you post repro steps? Thanks!

[JCPuerto]

Hi @SteveSandersonMS,

You said that the BASE_URL example is a complete example... but the thing is that according to your example, in Startup.cs I'm supposed to add

options.SupplyData = (context, data) =>
                    {
                        // Creates a new value called isHttpsRequest that is passed to TypeScript code
                        data["isHttpsRequest"] = context.Request.IsHttps;
                    };

So first, there's no "BASE_URL" variables at this point. While debugging, I only have 2 items: "originalHtml" and "isHttpRequest".

I see BASE_URL defined in main.ts as

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

getBaseUrl is a method that reads the base tag from the DOM.

BASE_URL is also defined in main.server.ts which right now is

extraProviders: [
      provideModuleMap(LAZY_MODULE_MAP),
      { provide: APP_BASE_HREF, useValue: params.baseUrl },
      { provide: 'BASE_URL', useValue: params.origin + params.baseUrl }
    ]

I change the "useValue" value and after recompiling nothing happens. BASE_URL is still coming from the DOM (set in main.ts). You can check what the constructor of fetch-data.component.ts is receiving.

To reproduce this, you can follow the instructions in the "Server-side rendering" section of https://docs.microsoft.com/en-us/aspnet/core/spa/angular?tabs=visual-studio, try to change the value of BASE_URL IN main.server.ts and check the result in fetch-data.component.ts.

Maybe I'm missing something somewhere, but I think it could be easier if in the example you take the value of the "isHttpsRequest" variable you guys created in Startup.cs and try to display it in some component using console.log or something. It will be less confusing that this thing with the BASE_URL variable coming from the DOM. :-)

Please let me know if you need more information.

Thank you!

[SteveSandersonMS]

@JCPuerto I think you're misunderstanding and imagining that the DI settings in main.server.ts (such as the 'BASE_URL' entry in the default template) are meant to be passed from server to client automatically. That is not the case. Instead, those values are being passed from .NET code into TypeScript code when it runs on the server (i.e., during SSR).

My guess is that your goal is to pass data from .NET code on the server to TypeScript code on the client. That's why you think the values always come from main.ts - because when the code runs on the client, that is indeed where the DI settings come from.

If I'm right and your goal is to pass data from .NET on the server to TypeScript code on the client, and you are doing SSR, then you can:

• Pass the data from .NET into your main.server.ts code using the SupplyData callback. This lets you populate a dictionary with whatever key/value pairs you want to pass into main.server.ts
• Then, in main.server.ts, receive the values as params.data.yourKeyName.
• Now use whatever technique you want to include your data in the rendered HTML such that your client-side code can pick it up. For this part, it's up to you to make this work, because from here on you're entirely inside your Angular app and it's not something that ASP.NET controls. One possible technique is:
  • Use Angular's DI system to pass the data through into one of your components when it runs on the server, just the same as how the existing 'BASE_URL' value is passed into fetch-data.component.ts.
  • In the component that receives it, cause the value to get rendered into the HTML somehow. For example, you could render some markup like <script>window.myValue= {theValueJSONEncoded};</script>.
  • Then to pick it up on the client, add some code that reads from window.myValue, but only when it runs on the client (e.g., inside a block like if (typeof window !== undefined) { ... }.

There are many other ways to arrange passing the data from your SSR code into client-side code, but that's all internal to your Angular application and doesn't involve ASP.NET code at all, so please consult Angular docs and/or the Angular community for details and suggestions.

[JCPuerto]

@SteveSandersonMS, you understood what I'm trying to do indeed.

I'll keep looking how to implement the Angular DI for the data received in main.server.ts like params.data.yourKeyName.

Thank you for your time. I really appreciated it.

:-)

[JohnGalt1717]

Hi @SteveSandersonMS I understand what you're saying to a point, but I need to pass a param from the environment variables (i.e. our Service Url Endpoint) to the server and I need to also write it to the client code. In the past this was easy, we just put it in the base tag as an attribute we called "api" because it was a view not a static file. Now this is impossible.

So according to the above we should write these values to the dom somehow on the server side in the main.server.ts presumably. However I cannot find any documentation on how I'd update the base tag in the dom on the server side to write this value (or anything else)

So do you know of any way of doing this? I would assume it's a pretty standard problem.

[SteveSandersonMS]

However I cannot find any documentation on how I'd update the base tag in the dom on the server side to write this value (or anything else)

In the Angular CLI app model, Angular controls the whole page content. So it's a case of using applicable Angular APIs for modifying whatever part of the DOM you want. For example, the Meta service supposedly has both browser and server equivalents, though I haven't personally tried it.

Another possibility you might consider, avoiding SSR entirely, it to pass the value from server to client as a cookie. Use ASP.NET middleware to attach the cookie to applicable responses, remember not to mark it as HttpOnly, then read the value in client-side JS.

[isaacrlevin]

@SteveSandersonMS I am having a similar issue as OP and figured I would post it here. I followed the steps in the doc to setup SSR, and I want to test passing around the isHttpsRequest from Startup. I added this code to main.server.ts

  { provide: 'isHttp', useValue: params.data.isHttpsRequest }

and this in fetch-data.component.ts

 constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, @Inject('isHttp') isHttp: boolean) {
    var foo = isHttp;
    http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
}

When I publish to Azure, I get this error in console when I go to the Fetch Data route

Error: StaticInjectorError[isHttp]:
StaticInjectorError[isHttp]:
NullInjectorError: No provider for isHttp!

The reason this seems to happen is that isHttp is not provided in main.ts. I assumed that main.server.ts was used when in Production environment, is that not the case?

Here is a repo with the code
https://github.com/isaac2004/TestSSR

and the site deployed to Azure
https://test-ssr.azurewebsites.net/

I assume I am missing a stupid step, but the doc isn't clear. Any help would be greatly appreciated. Thanks

[isaacrlevin]

@JohnGalt1717 were you able to figure this out? Having the exact same issue/need

[JohnGalt1717]

Yes. It's convoluted and I believe there is now a sample in JavaScriptServices to do it.

[isaacrlevin]

In this repo? I just looked around and found nothing. Link?

…

________________________________ From: James Hancock <notifications@github.com> Sent: Monday, March 19, 2018 2:26:05 PM To: aspnet/JavaScriptServices Cc: Isaac Levin; Comment Subject: Re: [aspnet/JavaScriptServices] Pass data from .NET code into TypeScript code (#1444) Yes. It's convoluted and I believe there is now a sample in JavaScriptServices to do it. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#1444 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AId5phNoK_fizivF4od_OB58onZTBF-iks5tf_g8gaJpZM4REea9>.

[JohnGalt1717]

Should be in the templates which you have to dig for now but they're there.

[isaacrlevin]

I looked in the templates and there are not samples there either.

…

________________________________ From: James Hancock <notifications@github.com> Sent: Monday, March 19, 2018 3:40:10 PM To: aspnet/JavaScriptServices Cc: Isaac Levin; Comment Subject: Re: [aspnet/JavaScriptServices] Pass data from .NET code into TypeScript code (#1444) Should be in the templates which you have to dig for now but they're there. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#1444 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AId5pmFnvt5-EK-f9F12xcSRP3NZLl1-ks5tgAmagaJpZM4REea9>.

[JohnGalt1717]

Sorry. They used to be there. My samples would all be pure webpack because .NET core is basically useless with Angular CLI. It's just a wrapper at this point. Better to use express under nodejs if you need SSR or just plain Static HTML if you don't if you're using the CLI. Cuts out the middle man that can't do anything anyhow.

[isaacrlevin]

I refuse to believe that it is impossible. I can get API calls to render in server with transfer, but not load index with data from server on build.

…

________________________________ From: James Hancock <notifications@github.com> Sent: Monday, March 19, 2018 4:26:22 PM To: aspnet/JavaScriptServices Cc: Isaac Levin; Comment Subject: Re: [aspnet/JavaScriptServices] Pass data from .NET code into TypeScript code (#1444) Sorry. They used to be there. My samples would all be pure webpack because .NET core is basically useless with Angular CLI. It's just a wrapper at this point. Better to use express under nodejs if you need SSR or just plain Static HTML if you don't if you're using the CLI. Cuts out the middle man that can't do anything anyhow. — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#1444 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AId5pghCTQkvDGTX896Npq7FpCu-j-aHks5tgBRugaJpZM4REea9>.