Blazor enable dynamic root components / Error: Dynamic root components have not been enabled in this application

Question

I want render a Blazor component from javascript. See https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-rc-1/ "Render Blazor components from JavaScript"

I have a HTML file:

<script src="/_framework/blazor.server.js"></script>
<div id="counter"></div>

<script>
    async function ready() {
        let containerElement = document.getElementById('counter');
        await Blazor.rootComponents.add(containerElement, 'counter', { incrementAmount: 10 });
    }
    document.addEventListener("DOMContentLoaded", ready);
</script>

And do

builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterForJavaScript<Counter>("counter");
});

Error message (JavaScript):

test.html:14 Uncaught (in promise) Error: Dynamic root components have not been enabled in this application.
    at E (blazor.server.js:1)
    at Object.add (blazor.server.js:1)
    at HTMLDocument.ready (test.html:8)

How can i enable dynamic root components?

Answer 1

The error is happening because of the delay between the document loading and Blazor being "ready" to process your request to add a component.

There doesn't appear to be any official documented solution for this, but something like this is possible

Change Blazor to manual start:

index.html

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script src="js/script.js" defer></script>

Start Blazor, then try to add components - repeat until success

script.js

document.addEventListener("DOMContentLoaded", startBlazor)

function startBlazor() {
    Blazor
        .start()
        .then(() => {
            requestAnimationFrame(AddBlazorComponents)
        })
        .catch((error) => console.error(error));
}

let attempts = 0
const maxAttempts = 120 // arbitrary choice

function AddBlazorComponents() {
    if (attempts > maxAttempts) {
        // give up after trying too many times
        console.error("Could not load Blazor components.")
        return
    }

    const containerElement = document.querySelector('#app')
    Blazor.rootComponents.add(containerElement, 'app', {})
        .catch(reason => {
            if (reason.message === "Dynamic root components have not been enabled in this application.")
                requestAnimationFrame(AddBlazorComponents)
            else
                console.error(reason)
        })
    attempts++
}

Better solution?

You could, possibly, add a JSInterop call to your .NET code to facilitate this, after the application starts - but it would be different for the different hosting models : Blazor Server / Blazor WebAssembly.

Even better might be to make a PR to the aspnetcore repo with a method of pre-registering components for the framework to load when it is ready.

Update 29 sep 2021

It turns out there is some currently undocumented functionality that helps here. I have copied my comment from @Swimburger 's github issue below:

The new JavaScript Initializer afterStarted is called (potentially) too soon for Dynamic components, but it turns out you can pass an initializer to be called for a dynamic component - but it is not well documented or intuitive imho.

To make this work, I changed the app startup like this (adding javaScriptInitializer: "loadApp") in program.cs:

builder.RootComponents.RegisterForJavaScript<App>(identifier: "app", javaScriptInitializer: "loadApp");

Then, and this is where it was non-intuitive, I added an export to my module (like afterStarted) called loadApp - but it wasn't called.

It turned out that loadApp is only found if I add it to the window object, so I added this to index.html

<script src="_framework/blazor.webassembly.js"></script>
<script>
    window.loadApp = function (component,params) {
        let containerElement = document.querySelector('#app')
        window.Blazor.rootComponents.add(containerElement, component, params)
    }
</script>

This feels like I am missing something in how to export my custom initializer OR it really does need to be added to window directly, which seems odd...