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. Do this for all projects in the solution.
Select .NET 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();Syncfusion scripts
Download and correct version of syncfusion-blazor.min.js and syncfusion-blazor-icons.css save it to the local folder reference it.
Client\index.html
<link href="css/syncfusion-blazor-icons.css" rel="stylesheet" />
<script src="js/syncfusion-blazor.min.js"></script>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