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. - Modify Blazor “Server” App
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/7 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:
Client\Program.cs
public static async Task Main(string[] args)
{
...
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
...
}
Modify Blazor “Server” App
Remove Server/Startup.cs
Modify Server/Program.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.ResponseCompression;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseWebAssemblyDebugging();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseBlazorFrameworkFiles();
app.UseStaticFiles();
app.UseRouting();
app.MapRazorPages();
app.MapControllers();
app.MapFallbackToFile("index.html");
app.Run();Other Changes:
Client\Program.cs
// Local Storage Service.
// builder.Services.AddScoped<ILocalStorageService, LocalStorageService>();
builder.Services.AddBlazoredLocalStorage();References:
https://blazorschool.com/tutorial/blazor-wasm/dotnet5/update-from-dotnet-5-to-dotnet-6-682674
Comments