保存具有相同组件名称的 Javascript/TypeScript 文件时出现错误 BLAZOR106答案

【问题标题】：Error BLAZOR106 when saving Javascript/TypeScript file with the same component's name保存具有相同组件名称的 Javascript/TypeScript 文件时出现错误 BLAZOR106
【发布时间】：2022-01-12 23:11:17
【问题描述】：

我有一个 .Net6 Blazor 服务器端项目。

我创建了一个名为 HomePage.razor 的组件，另一个名为 HomePage.razor.cs 的组件和一个名为 HomePage.razor.ts 的 TypeScript 文件。这样，我可以在解决方案资源管理器中看到 HomePage.razor 的良好视觉效果，因为“子”文件嵌套在其中。

当我保存我的 TypeScript 文件时，会自动生成文件 wwwroot\Pages\HomePage.razor.js，我将其引用到我的 _Host.cshtml。

另外，一旦我保存它，我就会收到错误BLAZOR106 - The JS module file 'c:\...\wwwroot\Pages\HomePage.razor.js' was defined but no associated razor component or view was found for it.

如果我将我的 TypeScript 文件的名称从 HomePage.razor.ts 更改为其他任何名称 - 例如 HomePage.ts - 保存它，并删除在 wwwroot 处生成的旧 JS 文件，一切正常。但是这样一来，我就失去了 VS2022 提供的解决方案资源管理器中漂亮的“按名称折叠”。

我找不到任何与BLAZOR106 错误相关的内容（Google 和 Microsoft 文档），所以不知道您是否知道如何解决此问题。

谢谢。

【问题讨论】：

您有tsconfig.json 文件吗？如果是这样，请将其配置为将 TypeScript 编译为不包含 .razor 的名称。
我有一个tsconfig.json 文件，但我想知道是否可以将其配置为使用模式重命名输出文件。我想我必须编写一个 msbuild 任务或使用额外的 build npm 脚本。这并不酷，因为我必须删除 TypeScript MsBuild 并手动创建一个自定义 npm 脚本。

标签： javascript typescript blazor

【解决方案1】：

我遇到了同样的错误，但在我的情况下，我什至没有使用 razor 组件，只是一个 razor 页面 .cshtml 文件。和你一样，我也有一个 .cshtml.cs 和 .cshtml.js 文件，因为我喜欢它的组织方式。

Pages/Index.cshtml
Pages/Index.cshtml.cs
Pages/Index.cshtml.js

最初我使用的是 bundleconfig.json 来缩小。

Pages/Index.cshtml.min.js
Pages/Index.cshtml.min.js.map

然后我用libman把js文件复制到：

wwwroot/js/Pages/Index.cshtml.js
wwwroot/js/Pages/Index.cshtml.min.js
wwwroot/js/Pages/Index.cshtml.min.js.map

如您所见，我没有在应用程序的任何地方使用 razor 组件或 Blazor。这在针对 .NET 5 时效果很好

我升级到 .NET 6 并开始遇到与您相同的错误。

背景魔法正在发生，aspnet 团队应该解决这个问题，但与此同时，我的解决方法是删除 .cshtml。部分来自 wwwroot 中的文件名。

wwwroot/js/Pages/Index.min.js
wwwroot/js/Pages/Index.min.js.map

为了实现这一点，我将我的 bundleconfig 更改为直接输出到这些文件，并删除了 libman 部分。它实际上比我以前做的更有意义，因为我只关心原始的 Index.cshtml.js 文件是嵌套的。

bundleconfig.json
{
    "outputFileName": "Pages/Index.cshtml.min.js",
    "inputFiles": [
      "Pages/Index.cshtml.js"
    ]
}

libman.json
{
  "provider": "filesystem",
  "library": "Pages/Index.cshtml.js",
  "files": [
    "Pages/Index.cshtml.js",
    "Pages/Index.cshtml.min.js",
    "Pages/Index.cshtml.min.js.map"
  ],
  "destination": "wwwroot/js/"
}

仅此：

bundleconfig.json
{
    "outputFileName": "wwwroot/js/Pages/Index.min.js",
    "inputFiles": [
      "Pages/Index.cshtml.js"
    ]
}

【讨论】：