无法使用 tsconfig.json 缩短导入路径答案

【问题标题】：Cannot shorten import paths with tsconfig.json无法使用 tsconfig.json 缩短导入路径
【发布时间】：2019-12-03 12:57:19
【问题描述】：

我在 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';

User 类如下所示：

export class User {
   ...
}

我的项目结构如下：

我看不出我的代码与我共享的不同解决方案有任何区别。显示的错误是：

[ng] src/app/services/profile.service.ts(3,22) 中的错误：错误 TS2307：找不到模块“@data/User”。 [ng]

我做错了什么？

【问题讨论】：

你重新启动服务器了吗？
就是这样，谢谢。

标签： angular typescript ionic-framework ecmascript-6 single-page-application

【解决方案1】：

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

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

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

然后你可以像导入一样

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

【讨论】：

【解决方案2】：

Typescript 路径的建议（尤其是在 Angular CLI 上下文中）

在tsconfig.json 中设置路径后，您应该重新启动服务器以使其按预期工作。
始终确保您的路径以根文件夹开头，以避免可能出现的错误，例如使用 src 文件夹作为根文件夹。

【讨论】：

【解决方案3】：

我多次使用paths 选项，结果各不相同。不幸的是，它永远不会像您期望的那样工作。您应该尝试的第一件事是删除您的 dist 并从头开始重新编译您的项目，并检查转译的 javascript 是否确实生成了正确的导入路径（例如 .js 文件中有完整的路径）。通常重新编译几次就可以了。

然后我建议依靠您的 IDE 来确保您的路径编写正确，例如，VSCode 应该能够解析您的导入，并且您应该能够通过 cmd+click 或 ctrl+click 导航您的导入。如果 VSCode 没有正确导航您的导入，很可能您需要再次检查您的 tsconfig（即使从您的屏幕截图中看起来是正确的）。

另外，重要的一点是paths 在使用 jest/ts-jest 执行测试时会被忽略，如果这是您想要实现的目标，那么您需要在 jest 配置中映射路径以及使用 @987654321 @ 像这样的选项：


  moduleNameMapper: {
    '^@finder/(.*)$': '<rootDir>/files-manipulation/$1',
    '^@metadata/(.*)$': '<rootDir>/folder-metadata/$1',
    '^@logger/(.*)$': '<rootDir>/logging/$1',
  },

【讨论】：

【解决方案4】：

以下内容在 2021 年对我有用：

a) 修改您的 tsconfig.json 文件，使其类似于以下内容：

"compilerOptions": {
  "baseUrl": "./",
  "paths": {
    "@environment/*": ["./src/environments/*"],
    "@app/*": ["./src/app/*"],
    "@core/*": ["./src/app/_core/*"],
    "@shared/*": ["./src/app/_shared/*"]
  }

b) 重启你的服务器。

c) 使用tsconfig.json 文件中提到的路径，如下例所示：

import { CategoriesService } from "@shared/services/categories/categories.service";

d) 确保修改上述导入以匹配您自己的目录结构。就是这样！

【讨论】：

【解决方案5】：

我以前没有做过这样的事情，但我认为如果您更改此文件，您也应该更改 app.modules.ts 的服务路径。在 app.routing.ts 中，您应该将类的导入路径更改为新路径，因为它以默认 ./ 开头并且您更改了它。在 user.module.ts 我认为你也应该改变。那不是答案，而是建议看看是否是问题所在问候。

【讨论】：