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

以下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 2

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

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

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

Answer 3

path别名仅由打字稿语言服务用于进行类型检查。 NodeJS require（）模块未实现此类功能。因此，如果需要，路径别名可以在NodeJS中运行。您需要将该代码带入NodeJS领域。

我也遇到了同样的问题。经过研究，我使用这个库来解决问题。 tsmon@0.4.5。

npm i -g tsmon

使用tsmon替换ts-node

tsmon server/index.ts

Answer 4

我遇到了同样的问题。我尝试了很多事情，现在我找到了适合我的解决方案。我的棱角项目中有一个应用程序和一个库。我想在我的应用程序中使用库别名。

我具有以下结构：

├── 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文件中定义要导出的类。但是，在使用库的情况下，这样做很有意义，因为您不想让其他应用程序看到所有内容。

Answer 5

TLDR;

npm i -D module-alias

，然后将tsconfig.json路径中的映射添加到_moduleAliases中的package.json

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

关于其背后的原因，即使正确配置了"jsx": "react"和"module": "commonjs"，将baseUrl与paths结合使用也会使您无法使用绝对导入。可以在此issue中找到详细的讨论。

Answer 6

检查 angular.json 文件，如果其“内部版本”->“选项”配置中已将“ 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 文件中添加“路径”。

Answer 7

路径存在一些问题，例如，如果将路径设置为根，我们可以这样说： @ root / src，在src中没有index.ts的默认值，这可能会失败...根据我的发现有些棘手。

Answer 8

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

tsconfig.json

Answer 9

我将其放在webpack resolve alias和tsconfig路径中，并且这样工作：）

Answer 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'中定义的模块

10 个答案: