Typescript 找不到在tsconfig`路径中定义的模块`

我正在尝试为我的模拟服务器设置别名。每当我试图编译

ts

文件时，它都会返回一个错误，即它找不到合适的模块，即使这些模块是在

tsconfig，json

->

路径中定义的

文件夹结构：

├── projects
│   └── lib
│       └── src
│           └── lib
│               └── lib-service.ts
│           └── index.ts
│   └── app
│       └──tsconfig.app.json
├── tsconfig.json

├── 服务器
│   └── src
│       └──/json
├── src
│   └──/模块
├── 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"
    ]
}

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

错误：
错误：找不到模块“@project/server/data/accounts/accountsList”
我遇到了同样的问题。我尝试了很多东西，现在我找到了一个适合我的解决方案。我的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文件中，则此soloution不起作用。我认为IDE（在我的例子中是WebStorm）在靠近根文件夹的tsconfig.json文件中搜索别名。因此，我扩展了我的tsconfig.app.json中的tsconfig.json

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

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

npm i-D模块别名

并将
tsconfig.json
路径中的映射添加到
包.json中的
\u moduleAlias

{
    "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"
    ]
}

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

至于其背后的原因，使用
“jsx”：“react”
和
“module”：“commonjs”
阻止您使用绝对导入，即使
baseUrl
和
路径
配置正确。详细的讨论可以在这里找到。
以下
tsconfig.json
对我有效，允许
import{foo}从'@models'
等导入相关的
index.ts
桶导出：

{
    "baseUrl": "./",
    "paths": {
      "@environment": ["./src/environments/environment.ts"],
      "@models": ["./src/app/shared/models/index.ts"],
      "@services": ["./src/app/shared/services/index.ts"]
    },
}

如果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文件中添加“路径”。
路径存在一些问题，例如，如果将路径设置为根目录，我们可以说：
@root/src，并且在src中没有具有默认值的index.ts，那么这可能会失败

根据我的发现，这有点棘手。
我的问题是扩展了我的
tsconfig.json
的
tsconfig.app.json
错误地覆盖了
“baseUrl”
选项。我从
tsconfig.app.json
中删除了它，因此它没有
的“baseUrl”
或
的“路径”
。最后，我的
tsconfig.json
有以下编译器选项：

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

我将它放在和tsconfig路径中，它是这样工作的：）
您可以像这样轻松定义简单的路径解析器：

"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"
  ]
}]
    

"compilerOptions": {
    "outDir": "out", //required
    "moduleResolution": "node",
    "baseUrl": "./", //required
    "paths": {
        "InjectableStub": [ //requires 2
            "myapp/myfolder/mymodule", //used in runtime
            "./myfolder/mymodule //used in compile-time
        ]
    }
}

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"
  ]
}]
    

"compilerOptions": {
    "outDir": "out", //required
    "moduleResolution": "node",
    "baseUrl": "./", //required
    "paths": {
        "InjectableStub": [ //requires 2
            "myapp/myfolder/mymodule", //used in runtime
            "./myfolder/mymodule //used in compile-time
        ]
    }
}

它不支持
路径中的模式
，但使用此存根可以添加它

tsconfig.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"
  ]
}]
    

"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
中以根文件夹的名称创建子文件夹，这就是为什么这两个注册。
经过一段时间的斗争，我发现您需要在主
tsconfig.json
中包含使用
tsconfig路径的所有目录。
tsconfig.json
文件的工作版本可能是

{
“编译器选项”：{
“baseUrl”：“，
...
“路径”：{
“@project/app/modules/*”：[
“src/modules/*”
],
“@project/server/data/*”：[
“服务器/src/json/*”
]
},
},
“包括”：[
“/src”，
“/服务器”
],
}
是否适用于@project/app/modules/*？不，任何别名都无法解析。My config具有指向['src'的include标志。试试看。不，不行。谢谢！最后使用了，
tsconfig路径
package.app就像一个cham！但typescript在重新启动IDE后仍在抱怨，因为出现错误：找不到模块。我不得不重新启动VS代码以去除红色下划线！但这样它将包括src中的所有文件夹，即使没有路径。在我的项目中，src中的一个文件夹与我包含的库同名。当它试图在导入时读取本地文件夹而不是包时，它发出了抱怨。