Blazor 组件 JS 隔离未找到 js 参考答案

【问题标题】：Blazor component JS isolation not finding js referenceBlazor 组件 JS 隔离未找到 js 参考
【发布时间】：2021-08-22 00:17:46
【问题描述】：

我创建了一个 Razor 组件库，目的是容纳一些自定义 Blazor 组件。

其中一个特别是 Infragistics Dock Manager Web 组件的包装器。

在组件库项目中，我在 wwwroot 文件夹下创建了一个名为 dockmanager 的文件夹，并将我的 javascript 包装文件 dockmanger.js 添加到其中。

我在 dockmanager.js 文件中包含了许多 JS 模块导出函数，以支持我的 Dock Manager Blazor 包装器组件。

在 Dock Manager Blazor 组件 OnAfterRenderAsync 方法中，我尝试在此代码之后获取 IJSObjectReference ..

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        try
        {
            if (firstRender)
            {
                // add reference to dockmanager.js module
                _module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./dockmanager/dockmanager.js");
            }
        }
        catch(Exception ex)
        {

        }
    
    }

在单独的 Blazor 测试项目中，我引用我的 Razor 组件库并将 Dock Manager Blazor 组件添加到测试页面。

当我导航到包含对我的自定义组件的引用的测试页面时，在启动时，当我尝试获取 IJSObjectReference 时，自定义组件 OnAfterRenderAsync 中出现异常。

例外情况如下：

无法获取动态导入的模块： http://localhost:12203/dockmanager/dockmanager.js TypeError: 失败获取动态导入的模块： http://localhost:12203/dockmanager/dockmanager.js

我已经三次检查了路径，它们看起来是正确的。

所有独立 JS 示例都在 Blazor 项目中，但在我的例子中，我在 Blazor 组件库中创建了自定义组件，并在 Blazor 测试项目中引用。

JS文件的路径应该不一样吧？

【问题讨论】：

标签： javascript blazor web-component

【解决方案1】：

解决方法是改变路径如下：

_module = await _jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/NextWare.UI.Components/dockmanager/dockmanager.js");

NextWare.UI.Components 指的是 Blazor 组件库的名称。

我希望这对其他人有帮助！

【讨论】：