C#•11mo ago•

2 replies

Cant import scoped Javascript in Blazor Standalone WebAssembly

In the past I have already done this in InteractiveServer Blazor, which is to import

{page}.razor.js

{page}.razor.js

in my razor page through

IJSRuntime

IJSRuntime

in the

OnAfterRender

OnAfterRender

step of the page lifecycle. as follows:

Page.Razor.cs

Page.Razor.cs

public partial class Page : ComponentBase 
{
   [Parameter] public required IJSRuntime js { get; init; }
   private IJSObjectReference pageModule;

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
      if (firstRender)
      {
         pageModule = js.InvokeAsync<IJSObjectReference>("import"
            , "Components/Pages/Page.razor.js")
      }
   }
   // dispose pattern hidden for simplicity
}

public partial class Page : ComponentBase 
{
   [Parameter] public required IJSRuntime js { get; init; }
   private IJSObjectReference pageModule;

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
      if (firstRender)
      {
         pageModule = js.InvokeAsync<IJSObjectReference>("import"
            , "Components/Pages/Page.razor.js")
      }
   }
   // dispose pattern hidden for simplicity
}

Page.razor.js

Page.razor.js

export function greet() 
{
   window.alert('!');
}

export function greet() 
{
   window.alert('!');
}

There is a way to make something similar work, by using global javascript files in

wwwroot\*.js

wwwroot\*.js

and

<script...

<script...

directives but that is not desired in the moment. I didn't find any way to use a modular aproach handled by the

ComponentBase

ComponentBase

object.
This is the web assembly startup implementation

Program.cs

Program.cs

using BlazorApp2;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

using BlazorApp2;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

.NET Core 9 environment

// stack overflow post: https://stackoverflow.com/questions/79542079/cant-import-scoped-javascript-in-blazor-standalone-webassembly

Stack Overflow

Cant import scoped Javascript in Blazor Standalone WebAssembly

In the past I have already done this in InteractiveServer Blazor, which is to import {page}.razor.js in my razor page through IJSRuntime in the OnAfterRender step of the page lifecycle. as follows:...

Cant import scoped Javascript in Blazor Standalone WebAssembly

In the past I have already done this in InteractiveServer Blazor, which is to import

{page}.razor.js

{page}.razor.js

in my razor page through

IJSRuntime

IJSRuntime

in the

OnAfterRender

OnAfterRender

step of the page lifecycle. as follows:

Page.Razor.cs

Page.Razor.cs

public partial class Page : ComponentBase 
{
   [Parameter] public required IJSRuntime js { get; init; }
   private IJSObjectReference pageModule;

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
      if (firstRender)
      {
         pageModule = js.InvokeAsync<IJSObjectReference>("import"
            , "Components/Pages/Page.razor.js")
      }
   }
   // dispose pattern hidden for simplicity
}

public partial class Page : ComponentBase 
{
   [Parameter] public required IJSRuntime js { get; init; }
   private IJSObjectReference pageModule;

   protected override async Task OnAfterRenderAsync(bool firstRender)
   {
      if (firstRender)
      {
         pageModule = js.InvokeAsync<IJSObjectReference>("import"
            , "Components/Pages/Page.razor.js")
      }
   }
   // dispose pattern hidden for simplicity
}

Page.razor.js

Page.razor.js

export function greet() 
{
   window.alert('!');
}

export function greet() 
{
   window.alert('!');
}

There is a way to make something similar work, by using global javascript files in

wwwroot\*.js

wwwroot\*.js

and

<script...

<script...

directives but that is not desired in the moment. I didn't find any way to use a modular aproach handled by the

ComponentBase

ComponentBase

object.
This is the web assembly startup implementation

Program.cs

Program.cs

using BlazorApp2;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

using BlazorApp2;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

.NET Core 9 environment

// stack overflow post: https://stackoverflow.com/questions/79542079/cant-import-scoped-javascript-in-blazor-standalone-webassembly

Stack Overflow

Cant import scoped Javascript in Blazor Standalone WebAssembly

Cant import scoped Javascript in Blazor Standalone WebAssembly

Cant import scoped Javascript in Blazor Standalone WebAssembly

Similar Threads

Similar Threads

Similar Threads