Не удается найти модуль, указанный в tsconfig `paths`

Я столкнулся с той же проблемой. Я пробовал много вещей, и теперь у меня есть решение, которое мне подходит. У меня есть приложение и библиотека в моем угловом проекте. Я хочу использовать псевдоним библиотеки в своем приложении.

У меня следующая структура:

├── 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. Но в случае использования библиотек это имеет смысл, потому что вы не хотите, чтобы все было видно для другого приложения.

Следующее 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"]
    },
}

Моя проблема заключалась в том, что мой tsconfig.app.json, который расширил мой tsconfig.json, неправильно переопределял параметр "baseUrl". Я удалил его из tsconfig.app.json, поэтому на нем не было "baseUrl" или "paths". В итоге у моего tsconfig.json были следующие параметры компилятора:

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

После некоторой борьбы с этим я понял, что вам нужно включить все каталоги, использующие tsconfig-paths, в ваш основной tsconfig.json. Рабочая версия вашего tsconfig.json файла может быть

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

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

TL; DR;

npm i -D module-alias

и добавьте сопоставления из ваших tsconfig.json путей в _moduleAliases в свой package.json

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

Что касается причин, лежащих в основе этого, использование "jsx": "react" в сочетании с "module": "commonjs" не позволяет вам использовать абсолютный импорт, даже если baseUrl и paths настроены правильно. Подробное обсуждение можно найти в этой проблеме.

Я поместил его как в псевдоним разрешения webpack, так и в пути tsconfig, и это сработало :)

Проверьте файл 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 со значением по умолчанию, тогда это может потерпеть неудачу ...

Это немного сложно, судя по тому, что я обнаружил.

Вы можете легко определить простой преобразователь пути следующим образом:

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 регистрации.