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

Question

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

这些是我在 中定义的别名tsconfig.json

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

然后在核心文件夹中，我重新导出 中的所有服务索引 文件( app/core/index.ts)

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

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

// 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/$1",
      "^@shared/(.*)$": "<rootDir>/src/app/shared/$1",
      "^@state/(.*)$": "<rootDir>/src/app/state/$1"
    }
  },

Answer 1

似乎问题是由第一个别名引起的:@core/*如果导出文件直接位于第一级，则无法正确解决。我想出了两个解决方法:
1 - 将索引文件移动到名为 services 的文件夹中其中仅包含 index.ts .
现在，当自动导入(或 TS Hero:组织导入)时，自动导入看起来像这样:

import {someService} from '@core/services'

2 - 将路径别名添加到 tsconfig.*.json仅针对直接指向重新导出的服务的文件 index.ts

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

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

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

在这两种情况下，如果您有任何其他再导出 index.ts在核心文件夹的更深处，它仍然可以正确使用，例如 @core/commons