带有路径别名的错误自动导入

Question

从 Angular 9 应用程序中提供路径别名的文件夹自动导入 services/components 时，我遇到了一个奇怪的问题。

这些是我在 tsconfig.json

中定义的别名

"paths": {
  "@core/*": ["app/core/*"],
  "@shared/*": ["app/shared/*"],
  "@state/*": ["app/state/*"]
}

然后在 Core 文件夹中，我将重新导出 index 文件 (app/core/index.ts)

中的所有服务

export * from './sse/sse.service';
export * from './rack/rack.service';

现在，当我在构造函数中注入服务时，所提供的自动导入选项会以错误的路径导入：

// Incorrect - auto imported path
import { RackService } from '@core/';

// Correct path after manual fix
import { RackService } from '@core/index';

这只是一个小问题，但同时也很烦人，我不确定是我这边配置不正确，还是 VS Code 问题。任何想法？它可能是由 JEST 引起的，因为我正在使用它而不是 Jasmine，它还需要在 package.json 中定义别名。

  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "./src/setup-jest.ts"
    ],
    "moduleNameMapper": {
      "^@core/(.*)$": "<rootDir>/src/app/core/",
      "^@shared/(.*)$": "<rootDir>/src/app/shared/",
      "^@state/(.*)$": "<rootDir>/src/app/state/"
    }
  },

Answer 1

问题似乎是由第一个别名引起的：@core/* 如果导出文件直接在第一层，则无法正确解决。我想出了两个解决方法：

1 - 将索引文件移动到名为 services 的文件夹中，该文件夹仅包含 index.ts。现在，当自动导入（或 TS Hero：组织导入）时，自动导入看起来像这样：

import {someService} from '@core/services'

2 - 为直接指向 re-export index.ts

的服务添加路径别名到 tsconfig.*.json 文件

"paths": {
  "@core/*": ["app/core/*"],
  "@core/services": ["app/core/index.ts"],
  "@shared/*": ["app/shared/*"],
  "@state/*": ["app/state/*"]
}

如果您使用的是 Jest 框架，第二个选项也需要在 package.json 中进行更改。

"moduleNameMapper": {
  "^@core/services$": "<rootDir>/src/app/core/index.ts",
  "^@core/(.*)$": "<rootDir>/src/app/core/",      
  "^@shared/(.*)$": "<rootDir>/src/app/shared/",
  "^@state/(.*)$": "<rootDir>/src/app/state/"
}

在这两种情况下，如果您在核心文件夹中有任何其他 re-export index.ts 更深的文件夹，它仍将被正确使用，例如@core/commons

带有路径别名的错误自动导入

Faulty auto import with path alias

alias

typescript

jestjs

package.json

angular