MatBlazor not loaded properly when environment is set to anything but Development

Created on 27 Feb 2020  路  6Comments  路  Source: SamProf/MatBlazor

MatBlazor fails to load when ASPNETCORE_ENVIRONMENT is anything else than Development. For example, change it to Local, Staging or Whatever, then it fails on page load with this error:

Microsoft.JSInterop.JSException: Could not find 'matBlazor' in 'window'.

Full stack trace:

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Could not find 'matBlazor' in 'window'.
p/<@https://localhost:44322/_framework/blazor.server.js:8:30748
p@https://localhost:44322/_framework/blazor.server.js:8:30709
beginInvokeJSFromDotNet/r<@https://localhost:44322/_framework/blazor.server.js:8:31416
beginInvokeJSFromDotNet@https://localhost:44322/_framework/blazor.server.js:8:31390
C</e.prototype.invokeClientMethod/<@https://localhost:44322/_framework/blazor.server.js:1:19202
C</e.prototype.invokeClientMethod@https://localhost:44322/_framework/blazor.server.js:1:19173
C</e.prototype.processIncomingData@https://localhost:44322/_framework/blazor.server.js:1:17165
e/this.connection.onreceive@https://localhost:44322/_framework/blazor.server.js:1:10276
A</e.prototype.connect/</</</i.onmessage@https://localhost:44322/_framework/blazor.server.js:1:38091


Microsoft.JSInterop.JSException: Could not find 'matBlazor' in 'window'.
p/<@https://localhost:44322/_framework/blazor.server.js:8:30748
p@https://localhost:44322/_framework/blazor.server.js:8:30709
beginInvokeJSFromDotNet/r<@https://localhost:44322/_framework/blazor.server.js:8:31416
beginInvokeJSFromDotNet@https://localhost:44322/_framework/blazor.server.js:8:31390
C</e.prototype.invokeClientMethod/<@https://localhost:44322/_framework/blazor.server.js:1:19202
C</e.prototype.invokeClientMethod@https://localhost:44322/_framework/blazor.server.js:1:19173
C</e.prototype.processIncomingData@https://localhost:44322/_framework/blazor.server.js:1:17165
e/this.connection.onreceive@https://localhost:44322/_framework/blazor.server.js:1:10276
A</e.prototype.connect/</</</i.onmessage@https://localhost:44322/_framework/blazor.server.js:1:38091

   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at MatBlazor.BaseMatComponent.JsInvokeAsync[T](String code, Object[] args)
   at MatBlazor.BaseMatButton.OnFirstAfterRenderAsync()
   at MatBlazor.BaseMatComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Steps to reproduce:

  • Create a new Blazor application, using "Server" template
  • Add MatBlazor dependencies
  • An a Mat component somewhere, for example to Index.razor
  • Check application is loading correctly and the component is displayed properly
  • Open launchSettings.json and change the value of ASPNETCORE_ENVIRONMENT to anything than Development.

At this moment:

  • page will fail to load with the error cited above.
  • Sources loaded in browser doesn't contain the matBlazor.js file:
    image

Most helpful comment

Well, after digging into it, as it often happens, it's not a bug but a feature, related to loading of static assets. Consume content from a referenced RCL describes the correct way of referencing static assets. To get the resources loaded properly in environments other than Development one has to explicitly tell that to web host builder with UseStaticWebAssets

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });

And it it works.

A little caution in case if your web host builder is located in an assembly that is not the "executing assembly", it _might_ not work. ASP.NET Core likes the configuration to be in the startup assembly. I've got through FW's code to see why that happens but have no idea if that's a bug or a badly documented feature...

All 6 comments

There's even simpler way to reproduce the problem:

  • clone the repo
  • Open launchSettings.json of MatBlazor.Demo.ServerApp project
  • Change the value of ASPNETCORE_ENVIRONMENT value to Anything
  • Run MatBlazor.Demo.ServerApp

It's not MatBlazor problem, It releted for all Blazor projects. Maybe you can solve this in https://github.com/dotnet/aspnetcore

Thanks for confirming my suspicion!

I've seen that recently released .NET Core SDK 3.1.2 has some fixes related to static files. Will try to give it a try to see if it solves the problem

Well, after digging into it, as it often happens, it's not a bug but a feature, related to loading of static assets. Consume content from a referenced RCL describes the correct way of referencing static assets. To get the resources loaded properly in environments other than Development one has to explicitly tell that to web host builder with UseStaticWebAssets

    public static IHostBuilder CreateHostBuilder(string[] args) =>
        Host.CreateDefaultBuilder(args)
            .ConfigureWebHostDefaults(webBuilder =>
            {
                webBuilder.UseStaticWebAssets();
                webBuilder.UseStartup<Startup>();
            });

And it it works.

A little caution in case if your web host builder is located in an assembly that is not the "executing assembly", it _might_ not work. ASP.NET Core likes the configuration to be in the startup assembly. I've got through FW's code to see why that happens but have no idea if that's a bug or a badly documented feature...

@SamProf you might want also to close #423 and point it to this.

can you please consider adding this to the MatBlazor home page...just spent 2 hours trying to find out why MatBlazor wasn't loading in my app :(

Was this page helpful?
0 / 5 - 0 ratings

Related issues

GioviQ picture GioviQ  路  6Comments

snerting picture snerting  路  3Comments

rogeralsing picture rogeralsing  路  5Comments

sowsan picture sowsan  路  3Comments

sowsan picture sowsan  路  4Comments