Blazor组件动态导入telerikReportViewer模块失败求助

return (<AppReportViewer/>)

问题描述 #

在Blazor WASM项目中调用<AppReportViewer/>组件时，出现以下404错误：

GET https://localhost:44319/_content/AppMain.Components/telerikReportViewer.js.razor.js net::ERR_ABORTED 404 (Not Found)

已尝试安装必要NuGet包、修改Index.html引入脚本、手动将telerikReportViewer.js放入wwwroot及其子目录，但问题未解决。

解决步骤 #

1. 验证NuGet包的静态资源嵌入 #

打开提供AppReportViewer组件的NuGet包（可使用NuGet Package Explorer查看），确认content/_content/AppMain.Components/路径下存在telerikReportViewer.js.razor.js文件。若包本身缺失该文件，需重新安装正确版本或联系包维护者。

2. 覆盖动态导入逻辑 #

由于组件由NuGet自动生成无法修改，可通过自定义JS文件替换原有导入逻辑：

• 在wwwroot下创建custom-report-viewer.js：

  export function initReportViewer() {
      return import('./js/telerikReportViewer.js'); // 对应你放置文件的实际路径
  }
  

• 在使用<AppReportViewer/>的页面razor文件中，注入IJSRuntime并替换初始化逻辑：

  @inject IJSRuntime JS
  
  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if (firstRender)
      {
          await JS.InvokeAsync<IJSObjectReference>("import", "./custom-report-viewer.js");
      }
      await base.OnAfterRenderAsync(firstRender);
  }
  

3. 确认静态资源配置 #

检查Program.cs中是否正确配置静态资源中间件：

builder.Services.AddBlazorWebAssemblyStaticAssets();

Blazor WASM默认已配置UseStaticFiles，但可确认该中间件未被意外移除。

4. 清理缓存并重建项目 #

• 删除项目的bin、obj目录
• 运行命令清理NuGet缓存：dotnet nuget locals all --clear
• 重新构建并启动项目，避免缓存导致的资源路径不匹配

5. 修正脚本引入顺序 #

确保Telerik相关脚本在Blazor核心脚本之前引入，示例Index.html配置：

<script src="js/telerikReportViewer.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

内容的提问来源于stack exchange，提问作者Netherdrake