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

Posted

技术标签:

【中文标题】无法使用 tsconfig.json 缩短导入路径【英文标题】:Cannot shorten import paths with 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]

我做错了什么?

【问题讨论】:

你重新启动服务器了吗? 就是这样,谢谢。 【参考方案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 我认为你也应该改变。 那不是答案,而是建议看看是否是问题所在 问候。

【讨论】:

以上是关于无法使用 tsconfig.json 缩短导入路径的主要内容,如果未能解决你的问题,请参考以下文章

打字稿无法解析导入中的非相对路径

compilerOptions.paths 不得设置(不支持别名导入)

未找到 tsconfig.json 中的 TypeScript 路径别名

typescript 动态导入与 tsconfig.json 中的 webpack.config 冲突?

共享 tsconfig.json 和相对路径

tsconfig.json 的 baseUrl 不起作用