fix: NavMenu not found in Fluent Blazor Web App Template

[pk9r]

🐛 Bug Report

• Create a Fluent Blazor Web App solution, select Interactive Render Mode as Auto (Server and WebAssembly). I named it FluentBlazorWebAppTemplate.
• Build and run the application, the first time you enter the website, wait for dotnet to load all resources.
• Reload the page and we can see the error

  Error: One or more errors occurred. (Root component type 'FluentBlazorWebAppTemplate.Components.Layout.NavMenu' could not be found in the assembly 'FluentBlazorWebAppTemplate'.)

  

💁 Possible Solution

When Interactive Render Mode is Auto, NavMenu with @rendermode InteractiveAuto but not in Client project. This will cause an error when the render mode changes to client-side. https://github.com/microsoft/fluentui-blazor/blob/538fd96a14d5ba3cdbd80225fa9113300306dba3/src/Templates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor#L4C26-L4C26

The Auto render mode determines how to render the component at runtime. The component is initially rendered server-side with interactivity using the Blazor Server hosting model. The .NET runtime and app bundle are downloaded to the client in the background and cached so that they can be used on future visits. Components using the automatic render mode must be built from a separate client project that sets up the Blazor WebAssembly host.

See more at: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#auto-render-mode

• I tried moving NavMenu to the Client project, as a result this error no longer appears and I think this is fine.
• I also tried removing @rendermode InteractiveAuto which caused the collapse button to not work, the only render mode that made it work when not in a Client project was InteractiveServer

🌍 Your Environment

• OS & Device: Windows 11
• Browser: Microsoft Edge
• .NET 8.0.100 and Microsoft.FluentUI.AspNetCore.Templates::4.0.0

[pk9r]

I just found #938, I think we need to do something about this at least change InteractiveAuto to InteractiveServer. It's not nice when a template throws an error because of a default option.

[vnbaaij]

I'm changing this for the next version of the templates (4.0.1). It will behave like this:	Rendermode / Interactivity	NavMenu @rendermode	NavMenu Collapsible	WC script in body
SSR / not applicable	❌	❌	✅
Server / Global	❌	✅	❌
Server / Per Page	✅	✅	❌
WebAssembly / Global*	❌	✅	❌
WebAssembly / Per Page*	✅	✅	❌
Auto / Global*	❌	✅	❌
Auto / Per Page*	✅	✅	❌

*NavMenu moved to Client project