在 ASP.NET Core 2.2 应用程序中导入 Typescript 模块答案

【问题标题】：Importing Typescript modules in ASP.NET Core 2.2 app在 ASP.NET Core 2.2 应用程序中导入 Typescript 模块
【发布时间】：2023-03-12 15:17:01
【问题描述】：

我正在尝试将一个 Typescript 文件简单地导入到 ASP.NET Core 2.2 应用程序 (Visual Studio 2019) 中的另一个 Typescript 文件中。我没有使用任何其他框架，例如 Angular。我遇到了无法在运行时找到模块文件的正确路径的问题。

我有 2 个简单的 Typescript 文件，我已将它们放入子文件夹“Typescript”中——它们被命名为“MyTSModule.ts”和“AnotherTSModule.ts”（下面是解决方案资源管理器的屏幕截图）。第一个 Typescript 模块包含一个引用第二个 Typescript 模块中的属性的函数。

最后，我想在 HTML Script 标记内的第一个 Typescript 模块中执行该函数。这些文件的代码如下，包括“tsconfig.json”。

tsconfig.json 文件

{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "outDir": "wwwroot/js/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

MyTSModule.ts 文件

import { anotherTSMessage } from "../Typescript/AnotherTSModule";

export function SayHelloFromAnotherTSModule() {
    alert(anotherTSMessage);

}

另一个TSModule.ts 文件

export const anotherTSMessage = "This message is from a second TS Module";

在 CSHTML 页面内

 <script type="module">

        import { SayHelloFromAnotherTSModule } from './js/MyTSModule.js';

        $(document).ready(function () {

            alert(SayHelloFromAnotherTSModule());

        });

    </script>

在“输出”窗口中，我收到“加载资源失败：服务器响应状态为 404（未找到）[http://localhost:51711/Typescript/AnotherTSModule]”错误。我认为路径是错误的，但我该如何解决这个问题？谢谢。

解决方案资源管理器的屏幕截图...

【问题讨论】：

标签： typescript asp.net-core

【解决方案1】：

我面临同样的问题。问题是，您请求的是http://localhost:51711/Typescript/AnotherTSModule，而文件是http://localhost:51711/Typescript/AnotherTSModule.js。

有很多方法可以修复它。

您可以尝试让内核服务器为不带扩展名的文件提供服务，就像在这里回答的 asp.net core - How to serve static file with no extension 一样，但我没有运气。

您可以将“.js”部分添加到您的导入代码行中，并使其看起来像这样：

import { anotherTSMessage } from "../Typescript/AnotherTSModule.js";

但如果你在实际项目中需要它，我会推荐使用 webpack。

您还可以从服务器提供文件，例如 nginx，提供没有扩展名的文件没有问题。

【讨论】：