Búsqueda de sitios web

typescript - Visual Studio Code no puede resolver las rutas tsconfig de Angular

Estoy tratando de importar algunos servicios usando barriles y las opciones paths de tsconfig, pero no puedo hacer que Angular y VSCode se lleven bien.

Si funciona para uno, no funciona para el otro y viceversa...

Mi situación parece ser bastante simple:

  • en src/app/services tengo un servicio que se exporta en un index.ts
  • mi src/tsconfig.app.json es solo esto:
{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": [],
    "baseUrl": ".",
    "paths": {
      "services": ["app/services"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
}

y mi aplicación Angular se compila sin problemas, pero VSCode sigue dándome errores cada vez que intento importar mi servicio desde 'services', dándome [ts] No se puede encontrar el módulo 'services'.

¿por qué?

Estoy usando TypeScript 3.1.6 y en la configuración de VSCode tengo "typescript.tsdk": "C:/Users/myuser/AppData/Roaming/npm/node_modules/typescript/lib" (también intenté dejar la configuración predeterminada, sin cambios)

editar:

si especifico paths en ./tsconfig.json comenzando desde src, vscode está contento pero angular no.

si especifico paths tanto en tsconfig.json como en src/tsconfig.app.json, tanto vscode como angular están contentos, pero me parece una solución demasiado estúpida...

Respuesta #1

Lo resolví, incluso si sigo pensando que todo es absurdo...

VsCode busca automáticamente un archivo tsconfig.json y no le importa tsconfig.app.json, por lo que paths necesita especificarse en tsconfig.json.

Al mismo tiempo, el scaffolding de angular-cli especifica un parámetro baseUrl en tsconfig.app.json que sobrescribe el anterior.

La solución es eliminar el parámetro baseUrl en el tsconfig.app.json o editar su valor a "../"

(Como una observación personal, dado que vscode se usa principalmente para construir soluciones Angular, creo que hay algo que debería revisarse en el scaffolding de angular-cli o en cómo vscode busca archivos tsconfig)

Respuesta #2

esta respuesta me funcionó.

  1. Abre Paleta de Comandos y selecciona TypeScript: seleccionar versión de TypeScript ...

  2. Seleccione para usar Versión del Espacio de Trabajo

Espero que esta respuesta resuelva el problema de otros que enfrentan el mismo problema.

Respuesta #3

He estado lidiando con este problema durante mucho tiempo y he probado casi todas las soluciones en internet. El proyecto se compilaba pero VSCode no reconocía las declaraciones de "paths" en mi tsconfig.json.

Lo que finalmente lo solucionó para mí fue eliminar las secciones "include" y "exclude" de mi tsconfig.json

No estoy seguro de cuál de los 2 era el problema, pero quitar ambos finalmente solucionó mi problema de larga data.

Respuesta #4

Parece que VSCode solo verifica el tsconfig.json directamente en la carpeta que tienes abierta. No revisa las carpetas superiores como lo hace tsc y no mira el tsconfig.app.json. Entonces, en algunos casos, el baseUrl podría faltar porque VSCode simplemente no ha leído un tsconfig.json.

La limitación de VSCode a un solo tsconfig.json en un lugar fijo ha existido durante un tiempo y parece que no es tan fácil hacer que esto sea más flexible: https://github.com/microsoft/vscode/issues/12463 (desplázate hasta el final)

Como se mencionó anteriormente, esto es molesto en el scaffolding de Angular-CLI con múltiples subproyectos donde solo hay un tsconfig.json en la raíz del espacio de trabajo. Obviamente, los proyectos podrían tener diferentes baseUrls en su tsconfig.app.json, los cuales no pueden estar todos en un único tsconfig.json en la raíz.

Como solución alternativa, además del baseUrl específico del proyecto en tsconfig.app.json, he creado un tsconfig.json adicional y minimalista para VSCode en la carpeta src de un subproyecto con "baseUrl":"." y abro VSCode desde allí. No lo he probado exhaustivamente, pero hasta ahora tanto la compilación de Angular como el intellisense de VSCode parecen funcionar correctamente.

Artículos relacionados