找不到在 tsconfig `paths` 中定义的模块
Posted
技术标签:
【中文标题】找不到在 tsconfig `paths` 中定义的模块【英文标题】:Cannot find module that is defined in tsconfig `paths` 【发布时间】:2019-11-01 04:37:14 【问题描述】:我正在尝试为我的模拟服务器设置别名。每当我尝试编译 ts
文件时,它都会返回错误,即即使在 tsconfig,json
->paths
中定义了正确的模块,它也找不到合适的模块。
文件夹结构:
├── server
│ └── src
│ └──/json
├── src
│ └──/modules
├── tsconfig.json
这是我的tsconfig.json
"compilerOptions":
"baseUrl": "./src",
"experimentalDecorators": true,
"jsx": "react",
"lib": [
"dom",
"es2015",
"es2015.promise"
],
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": true,
"noUnusedLocals": true,
"esModuleInterop": true,
"paths":
"@project/app/modules/*": [
"modules/*"
],
"@project/server/data/*": [
"../server/src/json/*"
]
,
"sourceMap": true,
"target": "es5"
,
"exclude": [
"node_modules",
"tools"
]
错误:
Error: Cannot find module '@project/server/data/accounts/accountsList'
【问题讨论】:
它是否适用于@project/app/modules/*? 不行,没有一个别名可以解析 我的配置,包含指向 ['src'] 的标志。试试看。 你碰巧在 webpack 中使用它吗? 谢谢!最终使用tsconfig-paths
包。
【参考方案1】:
我遇到了同样的问题。我尝试了很多东西,现在我得到了一个适合我的解决方案。我的 Angular 项目中有一个应用程序和一个库。我想在我的应用中使用库别名。
我有以下结构:
├── projects
│ └── lib
│ └── src
│ └── lib
│ └── lib-service.ts
│ └── index.ts
│ └── app
│ └──tsconfig.app.json
├── tsconfig.json
在根文件夹的 tsconfig.json 文件中,我定义了以下路径:
"paths":
"my-lib": [
"projects/lib/src/index.ts"
]
在那里我访问了一个 index.ts 文件,我在其中定义了我想要导出的内容。在我的情况下, index.ts 文件具有以下条目:
export * from './lib/lib-service';
现在我可以借助别名访问应用组件中的 LibService:
import LibService from 'my-lib';
值得一提的是,如果我将此条目添加到 tsconfig.app.json 文件中,此解决方案将不起作用。我认为 IDE(在我的情况下为 WebStorm)在靠近根文件夹的 tsconfig.json 文件中搜索别名。所以我在我的 tsconfig.app.json
中扩展了 tsconfig.json"extends": "../../tsconfig",
也许您必须重新启动 IDE 才能删除导入行的红色下划线。
我希望这个解决方案对你有用。您必须做更多的设置工作,因为您必须在 index.ts 文件中定义要导出的类。但在使用库的情况下,这是有意义的,因为您不想让其他应用程序看到所有内容。
【讨论】:
应用程序就像一个 cham!但是打字稿在重新启动 IDE 后仍然抱怨错误:找不到模块。 我不得不重新启动 VS Code 才能摆脱红色下划线! @TaylorA.Leach 随机的东西,你通常可以通过在 VS 代码中重新启动 TS 服务器来摆脱红线。cmd+shift+p
输入Restart TS Server
【参考方案2】:
经过一段时间的斗争后,我发现你需要在你的主要tsconfig.json
中包含所有使用tsconfig-paths
的目录。 tsconfig.json
文件的工作版本可能是
"compilerOptions":
"baseUrl": ".",
...
"paths":
"@project/app/modules/*": [
"src/modules/*"
],
"@project/server/data/*": [
"server/src/json/*"
]
,
,
"include": [
"./src",
"./server"
],
【讨论】:
但是这样即使没有路径,它也会包含 src 中的所有文件夹。在我的项目中,我在 src 中的文件夹具有相同的名称,就像我包含的库一样。它在尝试在导入时读取本地文件夹而不是包时抱怨。 它在开发模式下对我有用,但不适用于 tsc build 然后运行node dist/index.js
所以我将“dist/*”与“src/*”一起添加到路径中,键是“@/ *”,现在它可以工作了。【参考方案3】:
以下tsconfig.json
为我工作,允许import foo from '@models'
等用于关联的index.ts
桶出口:
"baseUrl": "./",
"paths":
"@environment": ["./src/environments/environment.ts"],
"@models": ["./src/app/shared/models/index.ts"],
"@services": ["./src/app/shared/services/index.ts"]
,
【讨论】:
【参考方案4】:我的问题是我的tsconfig.app.json
扩展了我的tsconfig.json
错误地覆盖了"baseUrl"
选项。我从tsconfig.app.json
中删除了它,所以它没有"baseUrl"
或"paths"
。最后,我的tsconfig.json
有以下编译器选项:
"baseUrl": "src/",
"paths":
"@shared/*": ["shared/*"],
"@client/*": ["client/*"],
"@server/*": ["server/*"]
【讨论】:
【参考方案5】:TLDR;
npm i -D module-alias
并将您的tsconfig.json
路径中的映射添加到您的package.json
中的_moduleAliases
"_moduleAliases":
"foo": "dist"
至于其背后的原因,将"jsx": "react"
与"module": "commonjs"
结合使用会阻止您使用绝对导入,即使baseUrl
和paths
配置正确。详细的讨论可以在这个issue找到。
【讨论】:
【参考方案6】:TypeScript path
属性只能解析基于类型的 URL,例如接口。
The intended behaviour is to allow TypeScript to resolve type information
[1]
我们大多数人似乎都经历过,指向实际依赖项的路径不会总是按我们预期的那样编译。尽管what the doc says,这显然是设计使然:
"compilerOptions":
"baseUrl": ".", // This must be specified if "paths" is.
"paths":
"jquery": ["node_modules/jquery/dist/jquery"] // This mapping is relative to "baseUrl"
阅读 Mitchell Simoens 的精彩分析 - Why TypeScript Paths Failed Me
在整个应用程序中为我的共享文件夹设置了@paths 后发现了这个。 在编译 TS 路径期间,中断和实际构建缺少各种模块。就个人而言,TS 无法以这种方式可靠地解决依赖关系,这令人非常失望。
【讨论】:
【参考方案7】:我把它放在webpack resolve alias 和 tsconfig 路径中,它就是这样工作的 :)
【讨论】:
【参考方案8】:路径存在一些问题,例如,如果您将路径设置为根目录,让我们说: @root/src 并且在 src 中没有 index.ts 具有默认值,那么这可能会失败...
根据我的发现,这有点棘手。
【讨论】:
【参考方案9】:检查 angular.json 文件,如果它的 "build" -> "options" 配置将 "tsConfig" 选项设置为您更改的 tsconfig 文件。
"architect":
"build":
"builder": "@angular-devkit/build-angular:browser",
"options":
"outputPath": "dist",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"stylePreprocessorOptions":
"includePaths": [
"src/assets/styles"
]
,
............
以上是我的angular.json文件,我配置为使用tsconfig.app.json。 在这种情况下,应该在 tsconfig.app.json 文件中添加“路径”。
【讨论】:
【参考方案10】:您可以像这样轻松定义简单的路径解析器:
loader.js
const Module = require("module");
const originalResolveFilename = Module._resolveFilename;
const tsConfig = require("./tsconfig.json");
const Path = require("path");
const fs = require('fs');
if (!tsConfig.compilerOptions || !tsConfig.compilerOptions.baseUrl)
throw "Compiler options Base URL (compilerOptions.baseUrl) is required in tsconfig.json.";
const basePath = Path.resolve(tsConfig.compilerOptions.baseUrl, tsConfig.compilerOptions.outDir);
//Inspired by https://github.com/dividab/tsconfig-paths but that one does not work with VS Code
Module._resolveFilename = function (request)
if (tsConfig.compilerOptions && tsConfig.compilerOptions.paths[request] instanceof Array) //Supports only without wildchars, but enough for our use
const pathsTried = [];
for (const reqPath of tsConfig.compilerOptions.paths[request])
const modPath = Path.resolve(basePath, reqPath) + ".js";
if (fs.existsSync(modPath)) return modPath;
pathsTried.push(reqPath);
throw "Module " + request + " not found, paths tried: " + pathsTried.join(", ");
const ret = originalResolveFilename.apply(this, arguments);
return ret;
;
然后从 VS Code 的 launch.json
中引用它,如下所示:
"configurations": [
"type": "node",
"request": "launch",
"name": "Node.js",
"runtimeArgs": ["-r", "./loader.js"],
"program": "$workspaceFolder/run.ts",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"$workspaceFolder/out/**/*.js"
]
]
它不支持paths
中的模式,但可以使用此存根添加它。
tsconfig.json
应该是这样的:
"compilerOptions":
"outDir": "out", //required
"moduleResolution": "node",
"baseUrl": "./", //required
"paths":
"InjectableStub": [ //requires 2
"myapp/myfolder/mymodule", //used in runtime
"./myfolder/mymodule //used in compile-time
]
至少对我而言,tsc
以 out
中的根文件夹的名称创建子文件夹,这就是 2 次注册的原因。
【讨论】:
以上是关于找不到在 tsconfig `paths` 中定义的模块的主要内容,如果未能解决你的问题,请参考以下文章
tsconfig.json在配置文件中找不到任何输入,怎么办?
Typescript Nodejs Dockerfile:错误 TS5057:在指定目录中找不到 tsconfig.json 文件:“。”
Typescript错误在tsconfig.json中将模块更改为“umd”或“amd”时找不到模块'typescript-Collections'
在配置文件“e:/HB/my-project/tsconfig.json”中找不到任何输入。指定的 “include“ 路径为“[“**/*“]”,“exclude“ 路径为“[]”。