Impossible de trouver le module défini dans tsconfig `chemins`

J'ai fait face au même problème. J'ai essayé beaucoup de choses et maintenant j'ai une solution qui fonctionne pour moi. J'ai une application et une bibliothèque dans mon projet angulaire. Je souhaite utiliser un alias de bibliothèque dans mon application.

J'ai la structure suivante:

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

Dans le fichier tsconfig.json dans le dossier racine, j'ai défini les chemins suivants:

import {LibService} from 'my-lib';

Là, j'accède à un fichier index.ts où je définis les choses que je veux exporter. Dans mon cas, le fichier index.ts a l'entrée suivante:

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

Maintenant, je peux accéder au LibService dans les composants de l'application à l'aide de l'alias:

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

Il est important de mentionner que cette solution ne fonctionne pas si j'ajoute cette entrée au fichier tsconfig.app.json . Je pense que l'EDI (dans mon cas WebStorm) recherche des alias dans le fichier tsconfig.json qui est proche du dossier racine. J'étends donc le tsconfig.json dans mon tsconfig.app.json

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

Vous devez peut-être redémarrer votre IDE pour supprimer le soulignement rouge de la ligne d'importation.

J'espère que cette solution fonctionne pour vous. Vous devez effectuer un peu plus de travail de configuration car vous devez définir les classes que vous souhaitez exporter dans le fichier index.ts. Mais en cas d'utilisation de bibliothèques, cela a du sens car vous ne voulez pas tout rendre visible pour une autre application.

TLDR;

npm i -D module-alias

et ajoutez les mappings de vos tsconfig.json chemins à _moduleAliases dans votre package.json

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

Quant au raisonnement derrière cela, utiliser "jsx": "react" en conjonction avec "module": "commonjs" vous empêche de pouvoir utiliser des importations absolues même si baseUrl et les paths sont correctement configurés. Une discussion détaillée peut être trouvée dans ce numéro .

Le tsconfig.json suivant tsconfig.json fonctionné pour moi, permettant l' import { foo } from '@models' etc. pour les exportations de baril index.ts associées:

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

Vérifiez le fichier angular.json si sa configuration "build" -> "options" a l'option "tsConfig" définie comme fichier tsconfig modifié.

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

Celui ci-dessus est mon fichier angular.json, et je l'ai configuré pour utiliser tsconfig.app.json . Dans ce cas, des "chemins" doivent être ajoutés dans le fichier tsconfig.app.json .

Il y a quelques problèmes avec le chemin, par exemple si vous définissez le chemin vers la racine, disons: @ root / src et dans src il n'y a pas d'index.ts qui a une valeur par défaut, alors cela pourrait échouer ... C'est un peu délicat par ce que j'ai trouvé.

Mon problème était que mon tsconfig.app.json qui étendait mon tsconfig.json "baseUrl" manière incorrecte l'option "baseUrl" . Je l'ai supprimé du tsconfig.app.json afin qu'il n'ait pas de "baseUrl" ou de "paths" . En fin de compte, mon tsconfig.json avait les options de compilateur suivantes:

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

Je l'ai mis à la fois dans l' alias de résolution du pack Web et dans les chemins tsconfig et cela a fonctionné de cette façon :)