Blazor WebAssembly 3.2.0 Preview 1 release now available

Daniel Roth

Daniel

Today we released a new preview update for Blazor WebAssembly with a bunch of great new features and improvements.

Here’s what’s new in this release:

  • Version updated to 3.2
  • Simplified startup
  • Download size improvements
  • Support for .NET SignalR client

Get started

To get started with Blazor WebAssembly 3.2.0 Preview 1 install the .NET Core 3.1 SDK and then run the following command:

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1

That’s it! You can find additional docs and samples on https://blazor.net.

Upgrade an existing project

To upgrade an existing Blazor WebAssembly app from 3.1.0 Preview 4 to 3.2.0 Preview 1:

  • Update all Microsoft.AspNetCore.Blazor.* package references to 3.2.0-preview1.20073.1.
  • In Program.cs in the Blazor WebAssembly client project replace BlazorWebAssemblyHost.CreateDefaultBuilder() with WebAssemblyHostBuilder.CreateDefault().
  • Replace IWebAssemblyHost with WebAssemblyHost.
  • Replace IWebAssemblyHostBuilder with WebAssemblyHostBuilder.
  • Move the root component registrations in the Blazor WebAssembly client project from Startup.Configure to Program.cs by calling builder.RootComponents.Add<TComponent>(string selector).
  • Move the configured services in the Blazor WebAssembly client project from Startup.ConfigureServices to Program.cs by adding services to the builder.Services collection.
  • Remove Startup.cs from the Blazor WebAssembly client project.
  • If you’re hosting Blazor WebAssembly with ASP.NET Core, in your Server project replace the call to app.UseClientSideBlazorFiles<Client.Startup>(...) with app.UseClientSideBlazorFiles<Client.Program>(...).

Version updated to 3.2

In this release we updated the versions of the Blazor WebAssembly packages to 3.2 to distinguish them from the recent .NET Core 3.1 Long Term Support (LTS) release. There is no corresponding .NET Core 3.2 release – the new 3.2 version applies only to Blazor WebAssembly. Blazor WebAssembly is currently based on .NET Core 3.1, but it doesn’t inherit the .NET Core 3.1 LTS status. Instead, the initial release of Blazor WebAssembly scheduled for May of this year will be a Current release, which “are supported for three months after a subsequent Current or LTS release” as described in the .NET Core support policy. The next planned release for Blazor WebAssembly after the 3.2 release in May will be with .NET 5. This means that once .NET 5 ships you’ll need to update your Blazor WebAssembly apps to .NET 5 to stay in support.

Simplified startup

We’ve simplified the startup and hosting APIs for Blazor WebAssembly in this release. Originally the startup and hosting APIs for Blazor WebAssembly were designed to mirror the patterns used by ASP.NET Core, but not all of the concepts were relevant. The updated APIs also enable some new scenarios.

Here’s what the new startup code in Program.cs looks like:

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

Blazor WebAssembly apps now support async Main methods for the app entry point.

To a create a default host builder, call WebAssemblyHostBuilder.CreateDefault(). Root components and services are configured using the builder; a separate Startup class is no longer needed.

The following example adds a WeatherService so it’s available through dependency injection (DI):

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        await builder.Build().RunAsync();
    }
}

Once the host is built, you can access services from the root DI scope before any components have been rendered. This can be useful if you need to run some initialization logic before anything is rendered:

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        var host = builder.Build();

        var weatherService = host.Services.GetRequiredService<WeatherService>();
        await weatherService.InitializeWeatherAsync();

        await host.RunAsync();
    }
}

The host also now provides a central configuration instance for the app. The configuration isn’t populated with any data by default, but you can populate it as required in your app.

public class Program
{
    public static async Task Main(string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        builder.Services.AddSingleton<WeatherService>();
        builder.RootComponents.Add<App>("app");

        var host = builder.Build();

        var weatherService = host.Services.GetRequiredService<WeatherService>();
        await weatherService.InitializeWeatherAsync(host.Configuration["WeatherServiceUrl"]);

        await host.RunAsync();
    }
}

Download size improvements

Blazor WebAssembly apps run the .NET IL linker on every build to trim unused code from the app. In previous releases only the core framework libraries were trimmed. Starting with this release the Blazor framework assemblies are trimmed as well resulting in a modest size reduction of about 100 KB transferred. As before, if you ever need to turn off linking, add the <BlazorLinkOnBuild>false</BlazorLinkOnBuild> property to your project file.

Support for the .NET SignalR client

You can now use SignalR from your Blazor WebAssembly apps using the .NET SignalR client.

To give SignalR a try from your Blazor WebAssembly app:

  1. Create an ASP.NET Core hosted Blazor WebAssembly app.

    dotnet new blazorwasm -ho -o BlazorSignalRApp
    
  2. Add the ASP.NET Core SignalR Client package to the Client project.

    cd BlazorSignalRApp
    dotnet add Client package Microsoft.AspNetCore.SignalR.Client
    
  3. In the Server project, add the following Hub/ChatHub.cs class.

    using System.Threading.Tasks;
    using Microsoft.AspNetCore.SignalR;
    
    namespace BlazorSignalRApp.Server.Hubs
    {
        public class ChatHub : Hub
        {
            public async Task SendMessage(string user, string message)
            {
                await Clients.All.SendAsync("ReceiveMessage", user, message);
            }
        }
    }
    
  4. In the Server project, add the SignalR services in the Startup.ConfigureServices method.

    services.AddSignalR();
    
  5. Also add an endpoint for the ChatHub in Startup.Configure.

    .UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapHub<ChatHub>("/chatHub");
        endpoints.MapFallbackToClientSideBlazor<Client.Program>("index.html");
    });
    
  6. Update Pages/Index.razor in the Client project with the following markup.

    @using Microsoft.AspNetCore.SignalR.Client
    @page "/"
    @inject NavigationManager NavigationManager
    
    <div>
        <label for="userInput">User:</label>
        <input id="userInput" @bind="userInput" />
    </div>
    <div class="form-group">
        <label for="messageInput">Message:</label>
        <input id="messageInput" @bind="messageInput" />
    </div>
    <button @onclick="Send" disabled="@(!IsConnected)">Send Message</button>
    
    <hr />
    
    <ul id="messagesList">
        @foreach (var message in messages)
        {
            <li>@message</li>
        }
    </ul>
    
    @code {
        HubConnection hubConnection;
        List<string> messages = new List<string>();
        string userInput;
        string messageInput;
    
        protected override async Task OnInitializedAsync()
        {
            hubConnection = new HubConnectionBuilder()
                .WithUrl(NavigationManager.ToAbsoluteUri("/chatHub"))
                .Build();
    
            hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
            {
                var encodedMsg = user + " says " + message;
                messages.Add(encodedMsg);
                StateHasChanged();
            });
    
            await hubConnection.StartAsync();
        }
    
        Task Send() => hubConnection.SendAsync("SendMessage", userInput, messageInput);
    
        public bool IsConnected => hubConnection.State == HubConnectionState.Connected;
    }
    
  7. Build and run the Server project

    cd Server
    dotnet run
    
  8. Open the app in two separate browser tabs to chat in real time over SignalR.

Known issues

Below is the list of known issues with this release that will get addressed in a future update.

  • Running a new ASP.NET Core hosted Blazor WebAssembly app from the command-line results in the warning: CSC : warning CS8034: Unable to load Analyzer assembly C:\Users\user\.nuget\packages\microsoft.aspnetcore.components.analyzers\3.1.0\analyzers\dotnet\cs\Microsoft.AspNetCore.Components.Analyzers.dll : Assembly with same name is already loaded.

    • Workaround: This warning can be ignored or suppressed using the <DisableImplicitComponentsAnalyzers>true</DisableImplicitComponentsAnalyzers> MSBuild property.

Feedback

We hope you enjoy the new features in this preview release of Blazor WebAssembly! Please let us know what you think by filing issues on GitHub.

Thanks for trying out Blazor!

Daniel Roth
Daniel Roth

Principal Program Manager, ASP.NET

Follow Daniel   

93 comments

Leave a comment

  • Avatar
    Howard Richards

    Just a note that anyone upgrading older WASM projects with ASP.NET Core server hosting also have a few amendments to make:

    In Startup.cs in the Server app, you may have a reference to the Client.Startup – since this has now been deleted you can change to Client.Program
    e.g. before update:

                app.UseClientSideBlazorFiles<Client.Startup>();
                // etc..
    
                app.UseEndpoints(endpoints =>
                {
                    // other code removed
                    endpoints.MapFallbackToClientSideBlazor<Client.Startup>("index.html");
                });
    

    These can be changed to Client.Program

  • Avatar
    Igor Nesterov

    Hi! Thanks for amazing job! But, I have a problem with running project, I created in Ubuntu 19.10 project by this command

    dotnet new blazorwasm -o BlazingPizza.Server

    with this new template version. Everything builds ok, but it can’t start with error:
    Cannot open assembly ‘/home/nesterovi/RiderProjects/BlazingPizza.Server/bin/Debug/netstandard2.1/BlazingPizza.Server.exe’: No such file or directory.

    I tried it In Rider, VS Code, MonoDevelop and everywhere I have the same result.

    Prerequisites:
    Mono, last version from repository and .Net Core 3.1.1 are installed

    Update:
    After all of this I created new solution by this command
    dotnet new blazorwasm -ho -o BlazingPizza
    Then
    dotnet build
    And finally
    dotnet run
    All works fine!

    BUT then, I opened solution in MonoDevelop and showed error as below:
    /home/nesterovi/RiderProjects/BlazingPizza/BlazingPizza/Server/BlazingPizza.Server.csproj: Error NU1201: Project BlazingPizza.Client is not compatible with netcoreapp3.1 (.NETCoreApp,Version=v3.1). Project BlazingPizza.Client supports: netstandard2.1 (.NETStandard,Version=v2.1) (NU1201) (BlazingPizza.Server)
    /home/nesterovi/RiderProjects/BlazingPizza/BlazingPizza/Server/BlazingPizza.Server.csproj: Error NU1201: Project BlazingPizza.Shared is not compatible with netcoreapp3.1 (.NETCoreApp,Version=v3.1). Project BlazingPizza.Shared supports: netstandard2.1 (.NETStandard,Version=v2.1) (NU1201) (BlazingPizza.Server)

    It looks like IDEs while does not support new version of Blazor in Linux

    Update 2: In VS Code I built it and run, It seems that it’s problem of MonoDevelop

    • Daniel Roth
      Daniel Roth

      Hi Igor,

      Blazor WebAssembly apps are downloaded to the browser as static files and then executed client-side. There isn’t an executable for Blazor WebAssembly apps that you can just run. We do however provide a dev server to facilitate locally hosting the app on your machine, which is how dotnet run works.

      Blazor WebAssembly apps can also be hosted by an ASP.NET Core app. This is the setup you get when you pass the -ho option when creating the project. The ASP.NET Core app handles serving the static files that make up the Blazor WebAssembly app and enables running .NET code on both sides of the wire. It’s full stack web development with .NET!

      You can build the ASP.NET Core app (the Server project in the generated solution) as an executable that you can just run. Running the exe will start up the ASP.NET Core app which then hosts the Blazor WebAssembly app as static files.

      For Blazor tooling, we support Visual Studio, Visual Studio for Mac, and Visual Studio Code. I’m not aware of any support for Blazor in MonoDevelop.

      I hope this helps!

      • Avatar
        Igor Nesterov

        I am not sure, that it helps with my problems with IDEs. But it gives better understanding what happens under the scene=) Thank you!
        Where can I show specific options for webassembly template? Such as “-ho”. Because if not your article I can’t create something like this in Linux. Running template without this option gives only one project.
        Does template have another specific options, or this is “-ho” is only one?

        • Daniel Roth
          Daniel Roth

          You’ll probably need to follow up with the specific IDE owners to understand why Blazor WebAssembly might not be working in those environments. I can really only speak to VS, VS4Mac, and VS Code.

          You can see all of the options for the Blazor WebAssembly template by running dotnet new blazorwasm -h. The -ho option is currently the only supported option, but soon we will be adding options for adding authentication support to the generated project.

          • Avatar
            Igor Nesterov

            Daniel, as I noticed that at the first time, VS code automatically generate and add for my solution folder, which calls “.vscode” with tasks.json and launch.json files which contains build tasks. I think that deal on it, because other IDEs don’t create it and(or) don’t understand their format.
            Are this tasks specific for VS Code or are they generated by one of the tool from .Net Core SDK tool?

          • Daniel Roth
            Daniel Roth

            There is specific support in the C# extension for VS Code for enabling tooling support for Razor files. But everything you need to build and run is provided by the .NET Core SDK. The .vscode folder is infrastructure specific to VS Code for wiring up things like debugging.

            Please note the commenting system on this blog is pretty limited, so if you’d like to discuss further you might want to open an issue on GitHub: https://github.com/dotnet/aspnetcore/issues.

  • Øyvind Habberstad
    Øyvind Habberstad

    Hi, thanks for this update!

    Regarding “The host also now provides a central configuration instance for the app. The configuration isn’t populated with any data by default, but you can populate it as required in your app.”, where is the config read from? An appsettings.json or is it embedded? And is it somehow possible to have config specific for different environments? Does there exist a more “complete” example? It would have been nice to “bootstrap” the wasm with config from the server, serving the initial request (with config) from an index.cshtml instead of an index.html.

    Thanks in advance!

  • Avatar
    Lucas Elzinga

    I have the .NET Core 3.1 SDK installed (along with a few older ones) yet when I run the command dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.2.0-preview1.20073.1 it doesn’t install and spits out the dotnet help message. When I attempt to make a new Blazor Web Assembly through VS above the “Back” and ‘Create” button it states the Source is CLI V3.1.101.

  • Mitchell Currey
    Mitchell Currey

    Thanks for the detailed post!

    I just have one question..
    I am attempting to apply auth to the SignalR requests, but when setting up my connection hub in the Client by using the AccessTokenProvider (as documented here), the access token I am adding is not being sent in the query params as would be expected.

    Is this a bug, or is there something I am missing that is required in Blazor by following this documentation?

    Thanks again!

    • Daniel Roth
      Daniel Roth

      We’re still listening to feedback and making changes accordingly, so yes, it’s still possible that there will be breaking changes while Blazor WebAssembly is in preview. Note that these changes are limited to Blazor WebAssembly specific functionality, like the WebAssembly host. The component model shipped already with .NET Core 3.1 and is shared with Blazor Server, so it has a very high compatibility guarantee at this point.

  • Avatar
    Guillaume ZAHRA

    Sorry if this is duplicate, but i didn’t find any answer to this question here, and even by reading aspnet issues on GitHub, nor the documentation:

    Does the new Microsoft.AspNetCore.SignalR.Client package support connections to a regular WebSocket server (not managed by a SignalR server hub) ?
    I knew there was some limitations some times ago about using Websockets API on Blazor WASM.

    Does Microsoft.AspNetCore.SignalR.Client issue this requirement ? Otherwise, what is the alternative ? Does this kind of scenario is still impossible from C# in Blazor WASM ?

    I would like to refactor any C# to Javascript code on my project for Websocket usage.

    Regards,
    Guillaume

  • Avatar
    Steven Cramer

    Thanks again Dan,

    A few other upgrade things. Mostly occurring in test projects if you are using WebApplicationFactory.

    Replace IWebAssemblyHost with WebAssemblyHost.
    BlazorWebAssemblyHost becomes WebAssemblyHostBuilder
    Replace IWebAssemblyHostBuilder with WebAssemblyHostBuilder.

    Example of some of the changes I made in my TestFixture.

        private readonly IWebAssemblyHostBuilder WebAssemblyHostBuilder;
    
        public TestFixture(WebApplicationFactory<Server.Startup> aWebApplicationFactory)
        {
          WebApplicationFactory = aWebApplicationFactory;
          WebAssemblyHostBuilder = BlazorWebAssemblyHost.CreateDefaultBuilder()
              .ConfigureServices(ConfigureServices);
        }
    

    updated to

        private readonly WebAssemblyHostBuilder WebAssemblyHostBuilder;
    
        public TestFixture(WebApplicationFactory<Server.Startup> aWebApplicationFactory)
        {
          WebApplicationFactory = aWebApplicationFactory;
          WebAssemblyHostBuilder = WebAssemblyHostBuilder.CreateDefault();
          ConfigureServices(WebAssemblyHostBuilder.Services);
        }
    
  • Hasse Jansson
    Hasse Jansson

    Hi Daniel and all other!

    Nice work with blazor, awesome!

    I added this chathub to my app and deployed to azure, but the chat page is crashing. It works locally..

    blazor.webassembly.js:1 WASM: Unhandled exception rendering component:
    l.printErr @ blazor.webassembly.js:1
    put_char @ dotnet.js:1
    write @ dotnet.js:1
    write @ dotnet.js:1
    ___syscall4 @ dotnet.js:1
    (anonymous) @ dotnet.wasm:1
    (anonymous) @ dotnet.wasm:1
    (anonymous) @ dotnet.wasm:1
    (anonymous) @ dotnet.wasm:1
    (anonymous) @ dotnet.wasm:1
    Module._mono_wasm_invoke_method @ dotnet.js:1
    call_method @ dotnet.js:1
    (anonymous) @ dotnet.js:1
    callEntryPoint @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    r @ blazor.webassembly.js:1
    f @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    n @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    Show 8 more frames from Library code
    blazor.webassembly.js:1 WASM: System.InvalidOperationException: A suitable constructor for type ‘Microsoft.AspNetCore.Http.Connections.Client.HttpConnectionFactory’ could not be located. Ensure the type is concrete and services are registered for all parameters of a public constructor.
    l.printErr @ blazor.webassembly.js:1
    put_char @ dotnet.js:1
    write @ dotnet.js:1
    write @ dotnet.js:1
    ___syscall4 @ dotnet.js:1
    (anonymous) @ dotnet.wasm:1
    (anonymous) @ dotnet.wasm:1
    Module._mono_wasm_invoke_method @ dotnet.js:1
    call_method @ dotnet.js:1
    (anonymous) @ dotnet.js:1
    callEntryPoint @ blazor.webassembly.js:1

    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    r @ blazor.webassembly.js:1
    f @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    n @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    Show 8 more frames from Library code
    blazor.webassembly.js:1 WASM: at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteFactory.CreateConstructorCallSite (Microsoft.Extensions.DependencyInjection.ServiceLookup.ResultCache lifetime, System.Type serviceType, System.Type implementationType, Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteChain callSiteChain) in :0
    l.printErr @ blazor.webassembly.js:1
    put_char @ dotnet.js:1
    write @ dotnet.js:1
    write @ dotnet.js:1
    ___syscall4 @ dotnet.js:1
    (anonymous) @ dotnet.wasm:1
    Module._mono_wasm_invoke_method @ dotnet.js:1
    call_method @ dotnet.js:1
    (anonymous) @ dotnet.js:1
    callEntryPoint @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    r @ blazor.webassembly.js:1
    f @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    n @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    Show 8 more frames from Library code
    blazor.webassembly.js:1 WASM: at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteFactory.TryCreateExact (Microsoft.Extensions.DependencyInjection.ServiceDescriptor descriptor, System.Type serviceType, Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteChain callSiteChain, System.Int32 slot) in :0
    l.printErr @ blazor.webassembly.js:1
    put_char @ dotnet.js:1
    write @ dotnet.js:1
    write @ dotnet.js:1
    ___syscall4 @ dotnet.js:1
    (anonymous) @ dotnet.wasm:1
    Module._mono_wasm_invoke_method @ dotnet.js:1
    call_method @ dotnet.js:1
    (anonymous) @ dotnet.js:1
    callEntryPoint @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    r @ blazor.webassembly.js:1
    f @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    n @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    Show 8 more frames from Library code
    blazor.webassembly.js:1 WASM: at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteFactory.TryCreateExact (System.Type serviceType, Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteChain callSiteChain) in :0
    l.printErr @ blazor.webassembly.js:1
    put_char @ dotnet.js:1
    write @ dotnet.js:1
    write @ dotnet.js:1
    ___syscall4 @ dotnet.js:1
    (anonymous) @ dotnet.wasm:1
    Module._mono_wasm_invoke_method @ dotnet.js:1
    call_method @ dotnet.js:1
    (anonymous) @ dotnet.js:1
    callEntryPoint @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    i @ blazor.webassembly.js:1
    Promise.then (async)
    l @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    r @ blazor.webassembly.js:1
    f @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    n @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    (anonymous) @ blazor.webassembly.js:1
    Show 8 more frames from Library code
    blazor.webassembly.js:1 WASM: at Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteFactory.CreateCallSite (System.Type serviceType, Microsoft.Extensions.DependencyInjection.ServiceLookup.CallSiteChain callSiteChain) in :0

  • Avatar
    Steven Cramer

    Hi Dan,

    dotnet –list-sdk
    3.1.101 [C:\Program Files\dotnet\sdk]
    3.1.200-preview-014883 [C:\Program Files\dotnet\sdk]

    How do I get 3.1.200-preview-014883 version of the sdk on a Linux machine? I can’t find the download link. I think VS Preview installed for me on Windows.

    Thanks.

    • Daniel Roth
      Daniel Roth

      Hi Jefferson,

      It sounds like the compiler can’t find the MainLayout component type. This may be because it failed to build, or it may be in a namespace or assembly that isn’t property referenced. Check your build output and see if there were any other build errors.

      I hope this helps!

      Daniel Roth

  • Igr Alexánder Fernández Saúco
    Igr Alexánder Fernández Saúco

    Thanks, but after updated, when I run an app I got this error.

    WASM: Error: Failed to start platform. Reason: [object XMLHttpRequest]

    actually, also

    Failed to load resource: the server responded with a status of 404 (Not Found)

    for *.dll.config files of my own libraries (also updated).

    Any clue?

    Environment

    dotnet –list-sdks
    2.1.202 [C:\Program Files\dotnet\sdk]
    2.1.503 [C:\Program Files\dotnet\sdk]
    2.1.602 [C:\Program Files\dotnet\sdk]
    2.1.604 [C:\Program Files\dotnet\sdk]
    2.1.802 [C:\Program Files\dotnet\sdk]
    2.2.202 [C:\Program Files\dotnet\sdk]
    2.2.204 [C:\Program Files\dotnet\sdk]
    2.2.402 [C:\Program Files\dotnet\sdk]
    3.0.100-preview3-010431 [C:\Program Files\dotnet\sdk]
    3.0.100-preview9-014004 [C:\Program Files\dotnet\sdk]
    3.0.100 [C:\Program Files\dotnet\sdk]
    3.1.100 [C:\Program Files\dotnet\sdk]

    Microsoft Visual Studio Enterprise 2019, Version 16.4.2

          • Igr Alexánder Fernández Saúco
            Igr Alexánder Fernández Saúco

            >> I don’t think there’s anything in Blazor WebAssembly by default that will make .dll.config files available over the network.

            Agree, the config files are listed in the output:

            Blorc.Core\src\Blorc.Core.Example\bin\Debug\netstandard2.1\Blorc.Core.dll.config
            Blorc.Core\src\Blorc.Core.Example\bin\Debug\netstandard2.1\Blorc.Core.Example.blazor.config
            Blorc.Core\src\Blorc.Core.Example\bin\Debug\netstandard2.1\Blorc.Core.Example.dll.config

            >>Is the request for this file expected?

            I don’t request that file explicitly. By default, when the application is launched the file is requested.

            >>Or is the existence of this request the problem?

            The file exists, so its existence is not a problem. The problem right after of the request of such file failed, because I got this error.

            WASM: Error: Failed to start platform. Reason: [object XMLHttpRequest]

  • Avatar
    Dale Sinder

    I updated a Server Hosted WebAssembly app to 3.2 preview this afternoon and it runs great in visual studio. But when I deploy it to IIS it never gets past my wwwroot/index.html app section loading message. Here is my Program.cs Main from the client-side:

    <

    public static async Task Main(string[] args)
    {
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add&lt;App&gt;(“app”);

    builder.Services.AddOptions();
    builder.Services.AddBlazoredModal();
    builder.Services.AddBlazoredLocalStorage();
    builder.Services.AddAuthorizationCore();
    builder.Services.AddScoped&lt;AuthenticationStateProvider, ApiAuthenticationStateProvider&gt;();
    builder.Services.AddScoped&lt;IAuthService, AuthService&gt;();

    await builder.Build().RunAsync();
    }

  • Hasse Jansson
    Hasse Jansson

    Signalr and chat

    Have anyone managed to try this chat logic in this example? I have, it works when running from within visual studio, cool.. but when i publish to azure webapp it doesnt work. I have enabled web sockets on the webapp. Any other clues?

  • Paul MMMM
    Paul MMMM

    using the latest preview version, i’m trying to add an onclick button to pass a parameter and do an async call but always get the following error:

    (in error list window): CS1660 Cannot convert lambda expression to type ‘object‘ because it is not a delegate type
    (in output window): error CS1660: Cannot convert lambda expression to type ‘bool‘ because it is not a delegate type

    no matter what i try i always get compile error. Here is a sample razor page to replicate.

    @page "/test"
    @page "/test/{year}"
    <h3>TestPage - @Year</h3>
    
    <div class="row">
        <div class="col">
            <button onclick="@(async => ()=> await ChangeYear("2020"))">@DateTime.Now.Year.ToString()</button>
            <button onclick="@(async => await ChangeYear("2019"))">@DateTime.Now.AddYears(-1).Year.ToString()</button>
            <button onclick="@(async => await ChangeYear("2018"))">@DateTime.Now.AddYears(-2).Year.ToString()</button>
        </div>
    </div>
    
    @code {
        [Parameter]
        public string Year { get; set; }
    
        protected override async Task OnInitializedAsync()
        {
            if (string.IsNullOrWhiteSpace(Year))
            {
                Year = DateTime.Today.Year.ToString();
            }
        }
    
        public async Task ChangeYear(string year)
        {
            if (Year != year)
            {
                //year has changed do something.. do async call to load different data
                Year = year;
            }
        }
    }
  • Igr Alexánder Fernández Saúco
    Igr Alexánder Fernández Saúco

    Authorized SignalR hubs is not working properly:

    _connection = new HubConnectionBuilder().WithUrl(
    .WithUrl(NavigationManager.ToAbsoluteUri(“/chatHub”)),
    opt =>
    {
    opt.AccessTokenProvider = async () => (await UserManager.GetUserAsync()).AccessToken;
    })
    .Build();

    Here is the error:

    WebSocket connection to ‘ws://…..?id=….’ failed: HTTP Authentication failed; no valid credentials available

  • Avatar
    Baran Ozdemir

    Hi Dan,

    Thanks for the update. First thing I noticed with my client-side app, I get these errors below. However the application works fine. Not sure why it is complaining about pdb files.

    Failed to load resource: the server responded with a status of 404 (Not Found) XXXX.Business.Web.pdb:1
    Failed to load resource: the server responded with a status of 404 (Not Found) XXXX.Models.pdb:1
    Failed to load resource: the server responded with a status of 404 (Not Found) XXXX.Business.SharedServices.pdb:1
    Failed to load resource: the server responded with a status of 404 (Not Found) XXXX.Models.pdb:1 
    Failed to load resource: the server responded with a status of 404 (Not Found) /_framework/_bin/Microsoft.WindowsAzure.Storage.pdb:1
  • Laxman Nagtilak
    Laxman Nagtilak

    Unable to find the _content folder in WebAssembly 3.2.0 Preview 1.
    I am using Blazored.Toast in my webassembly Project.
    I have referenced the css in index.html as below.

    <link href=”_content/Blazored.Toast/blazored-toast.css” rel=”stylesheet” />

    Before updating to WebAssembly 3.2.0 Preview 1 it was working but after updating the blazor to WebAssembly 3.2.0 Preview 1 it is not working .
    issue is Css file not found at the path.

  • Avatar
    JAHANGIR HUMMAYUN

    Hi Daniel,
    I have updated my existing project and changed Main method as you advised and given below. But i am getting an error that WebAssemblyHostBuilder is inaccessible due to its protection level.
    Can you please advise.

    Thanks

  • Avatar
    Chris Simeone

    Great post Dan, thanks!

    Can I create a Blazor WebAssembly app using Visual Studio for Mac (v8.4.6 build 36)?

    I installed .NET Core 3.1 SDK and the latest Blazor WebAssembly 3.2.0 Preview 1, but Blazor WebAssembly App template does not show up in Visual Studio for Mac.

    I also tried a CLI build, but get errors as well.

    For more detail about the problems I am having, here’s my StackOverflow question:
    https://stackoverflow.com/questions/60324442/missing-blazor-webassembly-app-template-for-visual-studio-for-mac

    • Daniel Roth
      Daniel Roth

      Hi Chris. Visual Studio for Mac currently doesn’t support creating Blazor WebAssembly projects. You can, however, use Visual Studio for Mac to create and develop Blazor Server projects. Support in Visual Studio for Mac for Blazor WebAssembly is planned for their upcoming 8.6 release.

  • Avatar
    Ismel Martínez Díaz

    Hello. Sorry if I don’t understand well this web stack and what is the final goal of this new browser client technology. But I was expecting something different. I will write some questions, please give me some answers.

    Why is needed all the .net libraries (.dll)? I was expecting only one or two .wasm files. I think the C# code will be compiled to .wasm.

    Why is needed a server ? I think that I will do (dotnet build) like (webpack build – for Angular or React -) and I will obtain one or two, or several, .wasm files, and an index.html file, and then I will put those files in some public path on any server that I would running, and the browser will load those files and the page will work like an SPA.

    Thanks.

    Thanks.

    • Daniel Roth
      Daniel Roth

      Hi Ismel,

      Blazor WebAssembly apps work by including with the app a small .NET runtime implemented in WebAssembly. The .NET runtime is then used to execute normal .NET assemblies (.dlls) directly in the browser. This enables keeps build times fast and enables you to use existing .NET libraries in your app. We don’t currently compile the entire app to WebAssembly. However, enabling support for compiling more of the app to WebAssembly is something we are working on for the upcoming .NET 5 release later this year.

      The only server component you need for a Blazor WebAssembly app is a web server that can serve static files. You can host Blazor WebAssembly apps on existing static site hosts like GitHub Pages or Azure Static Sites just like you can with an Angular or React app. .NET isn’t needed on the server at all. But many web apps have both a client and server component, so if you pair Blazor WebAssembly with .NET Core you now have a full stack solution for building your entire web app.

      I hope this helps!

  • Avatar
    Srihari Paulsamy

    Daniel, does the DOM diffing algorithm in StateHasChanged() take into account elements which are not visible and ignore them? E.g. if there is a table with 100 rows and columns, but if only the first 50 rows and 30 columns are visible, will DOM updates be pushed for the bottom 50 rows and 70 columns which are invisible? If the DOM diffing algorithm can track the visibility of elements and render accordingly, it would be really efficient and would let us build high frequency real-time user interfaces. Thank you.