无法从另一个项目访问 Typescript 文件 - 项目参考答案

【问题标题】：Not able to access Typescript files from another project - Project references无法从另一个项目访问 Typescript 文件 - 项目参考
【发布时间】：2021-07-31 08:12:39
【问题描述】：

我正在尝试访问在 mono-repo 中的另一个项目中定义的类型。以下是项目的结构

-- packages
   -- project-a
      -- tsconfig.json
   -- project-b
      -- tsconfig.json
   -- shared
      -- src
         -- UserModel.ts
         -- index.ts
      -- tsconfig.json
   -- tsconfig.base.json
-- package.json
-- tsconfig.json (Default no changes here)

tsconfig.base.json

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "declaration": true,
      "declarationMap": true,
      "emitDecoratorMetadata": true,
      "module": "commonjs",
      "noEmit": false,
      "composite": true
    },
    "files": [],
    "references": [{ "path": "./shared" }]
  }

共享 tsconfig.json

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "lib",
    "baseUrl": "./",
    "rootDir": "src",
    "composite": true,
    "experimentalDecorators": true,
    "declaration": true,
    "declarationMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/__tests__/*", "**/__e2e__/*"]
}

项目-a tsconfig.json

{
  "extends": "../tsconfig.base.json",
  "compileOnSave": true,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "downlevelIteration": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "jsx": "react", 
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@shared": ["../shared/src"]
    }

  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  },
  "references": [
    { "path": "../shared" }
  ]   
}

即使经过所有这些设置，当我尝试从 project-a 中的 shared 项目中引用 UserModel.ts 时，IDE 还是无法识别 UserModel.ts

项目中的导入行-a import {UserModel} from '@shared/UserModel'; //Even tried 'shared/src/UserModel'

我该如何解决这个问题？

【问题讨论】：

标签： angular typescript

【解决方案1】：

我可以使用以下方法编译该文件夹结构：

`packages/project-a/tsconfig.json`

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["../shared/src/*"]
    }
  }
}

`packages/shared/tsconfig.json`

我可以在这个 tsconfig 中没有任何内容的情况下编译它

{}

`tsconfig.json`

{
  "files": [],
  "references": [
    { "path": "packages/project-a" },
    { "path": "packages/shared" }
  ]
}

我的 IDE 和 typescript CLI (npx tsc --build) 完全没有问题。

我不确定究竟你的问题是什么，但也许你可以以此为起点？

这篇文章很有帮助：https://stackoverflow.com/a/64637923/10315665

【讨论】：

我创建了一个项目，如果您尝试在工作区中构建 Angular 项目，则会出现错误。尝试在此存储库中构建 Angular 项目 - github.com/shyamal890/mono-demo
@ShyamalParikh 你在谈论循环依赖吗？好吧，如果您从core-app 引用shared，显然不允许您从shared 引用core-app。无论如何，这样做没有意义，对吧。 Shared 应该为其他事物提供想法，而不是使用它们。
@ShyamalParikh 所以如果shared 中没有任何引用，基本上只引用shared。或者至少不引用任何引用 shared 本身的项目。
我已删除 @demo/shared 中的 @demo/mob 引用，但它无法正常工作。请尝试上面的github链接检查
那些不是正常的打字稿问题吗？ @ShyamalParikh

【解决方案2】：

请更改并尝试

项目-a tsconfig.json

    "paths": {
      "@shared/*": ["packages/shared/src/*", "packages/shared/src"]
    }

【讨论】：