Blazor通过JS渲染组件报错：动态根组件未在应用中启用怎么解决？

解决方案 #

你遇到的报错是因为没有显式启用Blazor应用的动态根组件权限，按你使用的入口文件类型对应调整即可： #

情况1：使用Razor入口页（_Host.cshtml/Layout文件） #

找到页面中渲染Blazor根应用的<component>标签，添加allow-dynamic-root-components="true"属性：

<!-- 修改前 -->
<component type="typeof(App)" render-mode="ServerPrerendered" />

<!-- 修改后 -->
<component type="typeof(App)" render-mode="ServerPrerendered" allow-dynamic-root-components="true" />

情况2：使用纯静态HTML作为入口 #

修改Blazor脚本的加载逻辑，关闭自动启动后手动初始化时开启动态根组件支持：

<!-- 关闭默认自动启动 -->
<script src="/_framework/blazor.server.js" autostart="false"></script>
<div id="counter"></div>

<script>
    async function ready() {
        // 手动启动Blazor并启用动态根组件
        await Blazor.start({
            rootComponents: true
        });
        let containerElement = document.getElementById('counter');
        await Blazor.rootComponents.add(containerElement, 'counter', { incrementAmount: 10 });
    }
    document.addEventListener("DOMContentLoaded", ready);
</script>

额外验证项 #

确保你的Counter组件中已定义对应接收参数：

public partial class Counter
{
    [Parameter]
    public int IncrementAmount { get; set; }
}

修改完成后重新编译启动即可解决报错。

内容的提问来源于stack exchange，提问作者Xeddon