.NET 6 Blazor WebAssembly项目使用MatBlazor抛出未定义异常

在.NET 5版本Blazor Server项目中可正常集成使用MatBlazor，但新建.NET 6版本Blazor WebAssembly项目、严格按照MatBlazor官方配置指引操作后，触发如下客户端错误：

Could not find matBlazor.matButton.init (matbalzor was undefined)

报错截图如下：

• 校验静态资源引用顺序
  打开wwwroot/index.html，确认MatBlazor的JS脚本引用位置在_framework/blazor.webassembly.js之前，顺序错误是触发该报错的最高频原因，正确引用片段如下：

  <!-- MatBlazor脚本必须放在blazor.webassembly.js之前 -->
  <script src="_content/MatBlazor/dist/matBlazor.js"></script>
  <script src="_framework/blazor.webassembly.js"></script>
  

  不要给matBlazor.js加defer或者async属性，避免加载时序问题导致全局matBlazor对象未及时挂载。
• 校验服务注册与全局引用配置
  .NET 6 Blazor WASM采用顶级语句写法，不需要照搬.NET 5版本Startup类的注册逻辑，直接在Program.cs的builder.Build()调用前添加服务注册：

  builder.Services.AddMatBlazor();
  

  同时打开_Imports.razor文件，确认添加了MatBlazor的全局命名空间引用：

  @using MatBlazor
  

• 校验MatBlazor版本兼容性
  2.14.0以下版本的MatBlazor没有做.NET 6适配，直接在.NET 6项目中安装旧版本会出现静态资源加载异常。先卸载已安装的低版本MatBlazor包，重新安装适配.NET 6的稳定版本：

  dotnet remove package MatBlazor
  dotnet add package MatBlazor --version 2.14.0
  

  安装完成后清理解决方案，删除项目下的bin、obj文件夹后重新编译，避免旧版本资源缓存导致异常。
• 排除缓存与资源加载异常
  打开浏览器开发者工具的Network面板，筛选JS请求，检查_content/MatBlazor/dist/matBlazor.js的响应状态：
  • 如果返回404，说明Nuget包还原异常，手动触发Nuget还原后重新编译项目即可
  • 如果是PWA类型的WASM项目，优先清除Service Worker离线缓存与站点存储，或者用浏览器无痕模式打开测试，离线缓存旧版本资源是常见的隐形问题

内容的提问来源于stack exchange，提问作者Minh-Luong