使用具有多个通配符的Globbing Pattern在TypeScript中的模块分辨率

Question

我正在使用以下文件夹结构（假设）处理Angular项目：

src
└── app
    ├── component1
    │   └── component1.component.ts
    └── component2
        └── component2.component.ts
tsconfig.json

在我的tsconfig.json我试图定义一个带有通配模式的路径，从@components/component1导入将解析为src/app/component1/component1.component。

这是我的tsconfig.json：

OTHER STUFF...

"baseUrl": "src",
"paths": {
  "@components/*": ["app/*/*.component"]
}

有了这个，我在一些模块/ service / etc中有以下导入：

import { Component1 } from '@components/component1';

我在编译时得到的错误是：

ERROR in error TS5062: Substitution 'app/*/*.component' in pattern '@components/*' in can have at most one '*' character.

如何在不造成TypeScript编译器错误的情况下实现此目的？在tsconfig.json中编写globbing模式的正确方法是什么？

感谢任何帮助。

注意

我不想@components/component1/component1。

Answer 1

正如编译器错误所述，*条目中不能有多个paths。

这可以通过Webpack别名来解决，可能通过第三方插件来解决。如果项目使用Angular CLI，则必须弹出Webpack配置。

导入单独文件（如@components/component1/component1）的问题通常由barrels解决，FrameDetector是重新导出目录内容的index.ts个文件：

export * from './component1.component';