import - typescript 无法解析导入中的非相对路径

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 文档接下来说:

A non-relative import to moduleB such as import { b } from "moduleB", in a source file /root/src/folder/A.ts, would result in attempting the following locations for locating "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

提前致谢。附言在我的 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'