Blazor Monaco Editor is never instanced! (within an Aspire project)

I created an Aspire project that in turns create a Blazor web frontend. And follow the following given instructions:

Step 1: I added the Blazor.Monaco Nugget package as instructed.

Step 2: The App.razor now looks like:

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <base href="/" />
   <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
   <link rel="stylesheet" href="app.css" />
   <link rel="stylesheet" href="Edam.Web.styles.css" />
   <link rel="icon" type="image/png" href="favicon.png" />
   <HeadOutlet />
</head>

<body>
   <Routes />

   <script src="_content/BlazorMonaco/jsInterop.js"></script>
   <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
   <script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
   <script src="_framework/blazor.web.js"></script>
</body>

</html>

Step 3. Added the (3) @using lines in _Imports.razor as instructuted

Step 4. I followed the instructions as per the BlazorMonaco Project ReadMe file, in a razor Page Called CodeEditor.razor I added:

@page "/codeeditor"
@inject IJSRuntime jsRuntime

<h3>Code Editor</h3>

<StandaloneCodeEditor Id="monaco-editor-id" ConstructionOptions="EditorConstructionOptions" />

After debugging/running the Monaco.Editor is never instanced. In the "Elements" TAB of "Inspect" I got:

<article class="content px-4" b-fhioi708ie=""><h3>Code Editor</h3>

<div id="monaco-editor-id" class="monaco-editor-container "></div></article>

I expected to see the instance details in the "div id='monaco-editor-id'", any suggestions or things that I may try?

serdarciplak / BlazorMonaco

Blazor Monaco Editor is never instanced! (within an Aspire project) #135