Blazor 组件 - 无法获取动态导入的模块 - telerikReportViewer

Question

我在前端 .razor 文件中调用了组件 。

构建应用程序后在前端打开组件时出现此错误：

GET https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
bn @ blazor.webassembly.js:1
(anonymous) @ invoke-js.ts:233
Ul @ invoke-js.ts:276
$func350 @ 00b1ee2e:0x1faef
$func246 @ 00b1ee2e:0x1bf8c
$func239 @ 00b1ee2e:0xf173
$func273 @ 00b1ee2e:0x1d1b1
$func3185 @ 00b1ee2e:0xe81aa
$func2506 @ 00b1ee2e:0xbdf5b
$func2512 @ 00b1ee2e:0xbe75c
$func2536 @ 00b1ee2e:0xc0db3
$mono_wasm_invoke_method_bound @ 00b1ee2e:0xa526
Module._mono_wasm_invoke_method_bound @ dotnet.native.8.0.1.z35rpqq4ur.js:8
kr @ invoke-cs.ts:273
(anonymous) @ invoke-cs.ts:247
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
invokeDotNetMethodAsync @ blazor.webassembly.js:1
invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
N @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
invokeWhenHeapUnlocked @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
N @ blazor.webassembly.js:1
C @ blazor.webassembly.js:1
dispatchGlobalEventToAllElements @ blazor.webassembly.js:1
onGlobalEvent @ blazor.webassembly.js:1
blazor.webassembly.js:1  crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Failed to fetch dynamically imported module: https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js
      TypeError: Failed to fetch dynamically imported module: https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js
Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js
TypeError: Failed to fetch dynamically imported module: https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.IJSObjectReference, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at AppMain.Components.Extensions.Extensions.ImportModule(IJSRuntime js, String path)
   at AppMain.Components.AppReportViewer.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

为了纠正上述错误，我已确保安装了必要的 Nuget 包，修改了 Index.html 文件以在 head 和 body 中包含必要的脚本。无法对组件本身进行任何更改，因为它是项目启动时由 Nuget 包自动生成的。将手动下载的 telerikReportViewer.js 放入 wwwroot 文件夹以及 wwwroot 内的 JS 子文件夹中。目前还没有解决这个问题。

Answer 1

您是否按照文章

集成 Blazor Report Viewer

的步骤 5 中所述添加了 interop.js？错误消息似乎表明它缺少

index.html

:

<script src="_content/Telerik.ReportViewer.Blazor/interop.js" defer></script>
@* Or this one if using the Telerik.ReportViewer.Blazor.Trial package *@
@*<script src="_content/Telerik.ReportViewer.Blazor.Trial/interop.js" defer></script>*@