Pesquisa de site

typescript - Não foi possível encontrar o módulo que está definido em tsconfig `paths`


Estou tentando configurar aliases para o meu servidor mock. Sempre que tento compilar arquivos ts, ele retorna um erro dizendo que não conseguiu encontrar módulos adequados, mesmo que eles estejam definidos em tsconfig.json->paths

Estrutura de pastas:

├── server
│   └── src
│       └──/json
├── src
│   └──/modules
├── tsconfig.json

Aqui está o meu 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"
    ]
}

Erro: Erro: Não foi possível encontrar o módulo '@project/server/data/accounts/accountsList'

Resposta #1

bem, depois de sofrer algumas horas, encontrei uma solução, estou usando o pacote ts-node, e obtive o mesmo erro Error: Cannot find module ''@modules/logger''

Você precisa adicionar a configuração ts-node no arquivo tsconfig.json. Você pode obter mais informações em ts-node

Aqui está como meu arquivo tsconfig.json se parece

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

e aqui está meu package.json

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

Você precisa instalar este pacote como uma dependência do módulo alias npm i module-alias

E não se esqueça de adicionar import 'module-alias/register'; no arquivo de entrada da sua aplicação como dependência do module alias.

Resposta #2

Depois de lutar com isso por um tempo, eu descobri que você precisa incluir todos os diretórios usando tsconfig-paths no seu tsconfig.json principal. Uma versão funcional do seu arquivo tsconfig.json poderia ser

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

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

Resposta #3

Eu enfrentei o mesmo problema. Tentei muitas coisas e agora consegui uma solução que funciona para mim. Eu tenho um aplicativo e uma biblioteca no meu projeto Angular. Eu quero usar um alias de biblioteca no meu aplicativo.

Eu tenho a seguinte estrutura:

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

No arquivo tsconfig.json na pasta raiz, tenho os seguintes caminhos definidos:

"paths": {
  "my-lib": [
    "projects/lib/src/index.ts"
  ]
}

Lá eu acesso um arquivo index.ts onde defino as coisas que quero exportar. No meu caso, o arquivo index.ts tem a seguinte entrada:

export * from './lib/lib-service';

Agora eu posso acessar o LibService nos componentes do aplicativo com a ajuda do alias:

import {LibService} from 'my-lib';

É importante mencionar que esta solução não funciona se eu adicionar esta entrada no arquivo tsconfig.app.json. Eu acho que o IDE (no meu caso, WebStorm) procura por aliases no arquivo tsconfig.json, que fica próximo à pasta raiz. Então, eu estendo o tsconfig.json no meu tsconfig.app.json

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

Talvez você tenha que reiniciar seu IDE para remover o sublinhado vermelho da linha de importação.

Espero que esta solução funcione para você. Você precisa fazer um pouco mais de trabalho de configuração porque precisa definir as classes que deseja exportar no arquivo index.ts. Mas no caso de usar bibliotecas, faz sentido porque você não quer tornar tudo visível para outro aplicativo.

Resposta #4

Meu problema era que meu tsconfig.app.json, que estendia meu tsconfig.json, estava sobrescrevendo a opção "baseUrl" incorretamente. Eu a removi do tsconfig.app.json para que ele não tivesse um "baseUrl" ou "paths". No final, meu tsconfig.json tinha as seguintes opções do compilador:

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

Resposta #5

O seguinte tsconfig.json funcionou para mim, permitindo import { foo } from '@models' etc. para os arquivos index.ts exportados no barril associado:

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

Artigos relacionados