Angular 10 - baseUrl 和路径不工作

Question

我正在尝试使相对 import 路由成为相对于 src/ 或 app/ 文件夹的相对路径，结构如下：

+ node_modules
+ src
| + app
| |  + services (just an example)
| |  |  -service.ts
| |  -app.module.ts (etc.)
| - tsconfig.app.json
- tsconfig.json
- package.json

基本上，我希望能够做到 import { SomeService } from 'services/some.service'。但是，无论我在 tsconfig.json（或 tsconfig.app.json）中指定什么，一旦我执行 ng serve，我都会收到一条错误消息，声称它不知道如何导入服务。

tsconfig.json:

{
  ...
}

src/tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@angular/*": ["../node_modules/@angular/*"],
      "@services/*": [ "app/services/*" ],
      "@interfaces/*": ["app/interfaces/*"]
    },
    "baseUrl": "./",
    ...
  },
  ...
}

我的 Angular 和 Typescript 版本：

"@angular/core": "^10.2.3",
"typescript": "^3.9.7"

我是不是漏掉了什么？

Answer 1

我觉得 baseUrl 应该是这样的：baseUrl: "./"。或者尝试将 baseUrl 设置为 src。这是我项目的配置：

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

我正在使用 index.ts 文件重新导出所有服务，以便在导入时可以通过 @core/services 路径访问它们。

我也处理过类似的问题，也许你能找到一些灵感。

Answer 2

从 tsconfig paths and module resolution errors in VS Code (GitHub) 的 sandangel 评论中复制的解决方案似乎有帮助：

vscode seem to only look into nearest tsconfig.json file, while angular read your tsconfig.app.json You should add relative path config to both tsconfig.json and tsconfig.app.json.

Angular 10 - baseUrl 和路径不工作

Angular 10 - baseUrl and paths aren't working

tsconfig

angular

angular10