打字稿无法解析导入中的非相对路径

Question

我有这样的项目结构

|--src
     |--app.component
                    |--index.ts
     |--home.component
                    |--index.ts
|--tsconfig.json
|--webpack.config.js

我正在尝试在 app.component-index.ts 中执行以下操作

import { HomeComponent } from 'components/home.component'

Typescript 找不到此模块并抛出

error TS2307: Cannot find module 'home.component'

Typescript 文档接下来说：

对 moduleB 的非相对导入（例如源文件 /root/src/folder/A.ts 中的 import { b } from "moduleB"）将导致尝试在以下位置查找“moduleB”：

/root/src/folder/moduleB.ts
/root/src/moduleB.ts
/root/moduleB.ts
/moduleB.ts 

所以对于我的情况我希望它会像

/src/components/app.component/components/home.component
/src/components/components/home.component
/src/components/home.component

提前致谢。PS 在我的 webpack.config 中，我已将 root.resolve 设置为 src 并且所有内容都正确。Typescript-loader 将错误打印到终端，但一切都已捆绑并正常工作

Answer 1

所以我可以猜测其中的“原因”部分，但我对 TypeScript 还比较陌生。我已经让它工作了，所以我会尽力根据该解决方案进行解释。

如果满足以下条件，您基于 TypeScript 文档的期望大部分是正确的：

'components/home.component'

被视为“非相对进口”。我相当确定（基于对我有用的解决方案）TypeScript 将其视为来自 tsconfig.json 中“compilerOptions.baseUrl”字段的绝对路径。

对我有用的是这样设置：

{
  "compilerOptions": {
    "baseUrl": ".",

    // Other options
  }
}

这本质上告诉 TypeScript 尝试找到类似的东西

'components/home.component'

通过在与 tsconfig.json 文件相同的目录中查找名为“components”的目录，然后在其中查找名为“home.component”的文件/目录。

因此，如果您的结构如下所示：

|--src
   |--app.component
       |--index.ts
   |--home.component
       |--index.ts
|--tsconfig.json
|--webpack.config.js

然后将 baseUrl 设置为“。” 你可能需要像这样格式化你的导入

import { HomeComponent } from 'src/home.component'