Question

在Angular 9应用程序中从带有路径别名的文件夹中自动导入服务/组件时遇到一个奇怪的问题。

这些是我在 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时由JEST引起的，并且它也需要在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/*"]
}

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

"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

自动导入路径别名错误

1 个答案: