找不到在 tsconfig `paths` 中定义的模块

Question

我正在尝试为我的模拟服务器设置别名。每当我尝试编译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'

Answer 1

好吧，经过几个小时的痛苦，我得到了解决方案，我正在使用该ts-node包，并且遇到了同样的错误Error: Cannot find module '@modules/logger'

您需要ts-node在文件中添加配置tsconfig.json。您可以在ts-node获取更多信息

这是我的tsconfig.json文件看起来像

{
    "ts-node": {
        // Do not forget to `npm i -D tsconfig-paths`
        "require": ["tsconfig-paths/register"]
    },
    "compilerOptions": {
        "lib": ["es5", "es6", "es7"],
        "target": "es2017",
        "module": "commonjs",
        "moduleResolution": "node",
        "rootDir": "src",
        "outDir": "build",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "noImplicitAny": true,
        "strict": true,
        "resolveJsonModule": true,
        "allowJs": true,
        "sourceMap": true,

        "baseUrl": ".",
        "paths": {
            "@modules/*": ["src/modules/*"],
            "*": ["node_modules/*"]
        },

    },
    "include": ["src/**/*"]
}

这是我的package.json

"_moduleAliases": {
        "@modules": "build/modules",
        "@core": "build/core"
    }

您需要将此包安装为模块别名的依赖项npm i module-alias

并且不要忘记 import 'module-alias/register'; 在应用程序的入口文件中添加作为模块别名依赖项。

Answer 2

我的问题是我的tsconfig.app.json扩展错误地tsconfig.json覆盖了该"baseUrl"选项。我将其从 中删除，tsconfig.app.json因此它没有"baseUrl"或"paths"。最后，我的tsconfig.json编译器选项如下：

"baseUrl": "src/",
"paths": {
    "@shared/*": ["shared/*"],
    "@client/*": ["client/*"],
    "@server/*": ["server/*"]
}

Answer 3

我遇到了同样的问题。我尝试了很多东西，现在我得到了一个适合我的解决方案。我的 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.json在我tsconfig.app.json

"extends": "../../tsconfig",

也许您必须重新启动 IDE 才能删除导入行的红色下划线。

我希望这个解决方案对你有用。您必须进行更多的设置工作，因为您必须在 index.ts 文件中定义要导出的类。但是在使用库的情况下，这是有道理的，因为您不想让其他应用程序看到所有内容。

Answer 4

TypeScriptpath属性可以可靠地解析基于类型的 URL，例如接口。

The intended behaviour is to allow TypeScript to resolve type information[ 1 ]

我们大多数人似乎都遇到过，指向实际依赖项的路径并不总是按照我们的预期进行编译。不管医生怎么说，这显然是设计使然：

{
  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"] // This mapping is relative to "baseUrl"
    }
  }
}

阅读 Mitchell Simoens 撰写的这篇精彩分解文章 -为什么 TypeScript 路径让我失败

在整个应用程序中设置我的共享文件夹的@paths后发现了这一点。在编译 TS 路径期间，中断和实际构建缺少各种模块。就个人而言，TS 无法以这种方式可靠地解决依赖关系，这令人非常失望。

Answer 5

太长了；

npm i -D module-alias

tsconfig.json并将路径_moduleAliases中的映射添加到package.json

"_moduleAliases": {
  "foo": "dist"
}

至于其背后的原因，即使和已正确配置，但"jsx": "react"与 结合使用"module": "commonjs"会阻止您使用绝对导入。详细的讨论可以在这个问题中找到。baseUrlpaths

Answer 6

以下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"]
    },
}

Answer 7

经过一段时间的斗争后，我发现您需要tsconfig-paths在 main 中包含所有使用的目录tsconfig.json。您的tsconfig.json文件的工作版本可能是

{
    "compilerOptions": {
        "baseUrl": ".",
...
        "paths": {
            "@project/app/modules/*": [
                "src/modules/*"
            ],
            "@project/server/data/*": [
                "server/src/json/*"
            ]
        },
    },

    "include": [
        "./src",
        "./server"
    ],
}