Blazor wasm Custom Component using in angular with javascript

I have a blazor.wasm project, with registered custom element

builder.RootComponents.RegisterCustomElement("expression-box");

and on angular side component looks like

<h1>Hello from Angular!</h1>
<expression-box></expression-box>


and it works,of course with setup proxy file:

const target = "http://localhost:5280/"

const PROXY_CONFIG = [
{
context: [,
"/_content",
"/_framework",
"/_blazor",
],
proxyTimeout: 3000,
target: target,
secure: false,
headers: {
Connection: 'Keep-Alive'
}
},
{
context: [
"/_blazor"
],
target: target,
secure: false,
ws: true,
logLevel: "debug"
}
];

module.exports = PROXY_CONFIG;


now my blazor component looks simple, and main interest part of this is:

@inject IJSRuntime JSRuntime

<p>Status: Connected</p>

<div style="height: 400px; width: 100%;" class="editor-container">
<StandaloneCodeEditor
@ref="editor"
Id="code-editor"
ConstructionOptions="EditorConstructionOptions"
OnDidChangeModelContent="OnCodeChanged" />
</div>


this is https://github.com/serdarciplak/BlazorMonaco component. I need to add js here to make it work, I tried JSRuntime for example

await JSRuntime.InvokeAsync<IJSObjectReference>("import", "_content/BlazorMonaco/jsInterop.js");


so when I run it on blazor directly it works, as I see



but those things are missing in angular, can something be cone about it.

Continue reading...