Update from .NET 5 to .NET 6
.NET 6 was released on 10-Nov-2021. Since then, Blazor has greatly improved. This tutorial will walk you through how to update your Blazor WebAssembly project from .NET 5 to .NET 6.
To update to a new version of Blazor WebAssembly, you need to follow 4 steps:
- Change the target framework.
- Upgrade NuGet packages.
- Add
HeadOutlettoProgram.cs. - Remove unnecessary codes (optional).
You can download the example code used in this topic on GitHub.
Prerequisites
To perform this update, you are required to have the following tools:
- Visual Studio 2022 Current.
- .NET 6 Runtime.
Change the target framework
The first step to update Blazor WebAssembly to a newer version is updating the target framework. Right click to your project, select Properties.
Select .NET 6 as the target framework.
Upgrade NuGet packages
Once you updated your target framework, you are required to upgrade the NuGet packages as well. Right click on your project, select Manage NuGet packages.
Open Uptades tab and update 2 packages: Microsoft.AspNetCore.Components.WebAssembly, Microsoft.AspNetCore.Components.WebAssembly.DevServer.
Add HeadOutlet to Program.cs
HeadOutlet is a new component of Blazor WebAssembly .NET 6. It will help you modify the information in the <head> tag easier. Make sure to add HeadOutlet. Open Program.cs and modify the code as follow:
public static async Task Main(string[] args)
{
...
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
...
}
Remove unnecessary codes (optional)
This step is an optional step. However, if you follow this step, it will make your code shorter and keep your project up to date. Remove the namespace, Program and Main declaration. Your code will look like this:
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Net.Http;
using UpgradeNET6BlazorWasm;
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();
