angular - 无法使用 tsconfig.json 缩短导入路径

Question

我在 tsconfig.json 中定义的路径不起作用。

我用 Ionic 4 开始了一个项目，希望避免导入中的难看路径。我找到了有关修改 tsconfig.json 的信息，我这样做了。我已经找到了这些答案: How to use paths in tsconfig.json? 和 Cannot resolve tsconfig paths

所以我的 tsconfig.json 看起来像这样:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@services/*": ["app/services/*"],
      "@data/*": ["app/data/*"]
    }
  }
}

然后我访问了一个在我的服务中指定用户的类:

import { User } from '@data/User';

用户类如下所示:

export class User {
   ...
}

我的项目结构是这样的:

我没有发现我的代码与我共享的不同解决方案之间有任何区别。显示的错误是:

[ng] ERROR in src/app/services/profile.service.ts(3,22): error TS2307: Cannot find module '@data/User'. [ng]

我做错了什么？

Answer 1

你应该像这样改变你的配置

"paths": {
  "@services/*": ["src/app/services/*"],
  "@data/*": ["src/app/data/*"]
}

因为路径应该从src文件夹开始

然后你可以像这样导入

import { User } from '@data/User';