javascript - 如何在另一个 JS 应用程序中导入 blazor 自定义元素？

Question

我有一个 blazor 服务器应用程序，注册的自定义元素如下代码所示:

builder.Services.AddServerSideBlazor(options =>
{
    options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});

我想在另一个 node.js 应用程序中导入此 blazor 自定义元素，以将其转换为 lit 元素(Web 组件)。 我在我的 node.js 应用程序中添加了以下脚本

<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>

但是在初始化 Blazor 时它仍然使用节点应用程序端口并且在初始化时失败。 我不确定我在这里遗漏了什么，或者是否有任何其他方法可以做到这一点。

Answer 1

下面描述了我如何解决与您的问题类似的问题:尝试注册自定义元素，客户端不呈现组件并且任何地方都没有错误消息。

我关注了the instructions但是客户端没有发生任何事情。在使用 Firefox 检查 websocket 的流量后，我遇到了从客户端到服务器的以下消息(为了便于阅读而稍作编辑):

ùÀµEndInvokeJSFromDotNetÂÚÙ[
    2,
    false,
    "Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
    findFunction/<@https://localhost:5001/_framework/blazor.server.js:1:497
    findFunction@https://localhost:5001/_framework/blazor.server.js:1:465
    E@https://localhost:5001/_framework/blazor.server.js:1:2606
    attachWebRendererInterop/<@https://localhost:5001/_framework/blazor.server.js:1:33097
    attachWebRendererInterop@https://localhost:5001/_framework/blazor.server.js:1:33145
    beginInvokeJSFromDotNet/s<@https://localhost:5001/_framework/blazor.server.js:1:3501
    beginInvokeJSFromDotNet@https://localhost:5001/_framework/blazor.server.js:1:3475
    _invokeClientMethod/<@https://localhost:5001/_framework/blazor.server.js:1:71894
    _invokeClientMethod@https://localhost:5001/_framework/blazor.server.js:1:71880
    _processIncomingData@https://localhost:5001/_framework/blazor.server.js:1:69922
    kt/this.connection.onreceive@https://localhost:5001/_framework/blazor.server.js:1:64322
    connect/</o.onmessage@https://localhost:5001/_framework/blazor.server.js:1:48638
    EventHandlerNonNull*connect/<@https://localhost:5001/_framework/blazor.server.js:1:48489
    connect@https://localhost:5001/_framework/blazor.server.js:1:48005
    _startTransport@https://localhost:5001/_framework/blazor.server.js:1:57626
    _createTransport@https://localhost:5001/_framework/blazor.server.js:1:56195
    _startInternal@https://localhost:5001/_framework/blazor.server.js:1:54044
    async*start@https://localhost:5001/_framework/blazor.server.js:1:51309
    _startInternal@https://localhost:5001/_framework/blazor.server.js:1:66198
    _startWithStateTransitions@https://localhost:5001/_framework/blazor.server.js:1:65598
    start@https://localhost:5001/_framework/blazor.server.js:1:65262
    Gn@https://localhost:5001/_framework/blazor.server.js:1:129904
    Yn@https://localhost:5001/_framework/blazor.server.js:1:127771
    async*@https://localhost:5001/_framework/blazor.server.js:1:131523
    @https://localhost:5001/_framework/blazor.server.js:1:131529
    "
]

在我的例子中，我没有添加 <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>到 html。