无法使用 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 路径别名