Mono Repo：访问项目外部的打字稿文件会出现 'pos' 未定义错误

Question

我正在尝试构建一个 Angular 单声道存储库。但是，当我尝试 run lerna run start --scope=@demo/core-app 时，出现以下错误：

[error] TypeError: Cannot read property 'pos' of undefined
    at createFileDiagnosticAtReference (E:\Temp\node_modules\typescript\lib\typescript.js:107529:68)
    at addProgramDiagnosticAtRefPath (E:\Temp\node_modules\typescript\lib\typescript.js:107547:93)
    at checkSourceFilesBelongToPath (E:\Temp\node_modules\typescript\lib\typescript.js:107208:25)
    at Object.getCommonSourceDirectory (E:\Temp\node_modules\typescript\lib\typescript.js:105619:21)
    at Object.getDeclarationEmitOutputFilePath (E:\Temp\node_modules\typescript\lib\typescript.js:17179:125)
    at getOutputPathsFor (E:\Temp\node_modules\typescript\lib\typescript.js:99488:112)
    at forEachEmittedFile (E:\Temp\node_modules\typescript\lib\typescript.js:99425:41)
    at Object.emitFiles (E:\Temp\node_modules\typescript\lib\typescript.js:99654:9)
    at emitWorker (E:\Temp\node_modules\typescript\lib\typescript.js:106125:33)
    at E:\Temp\node_modules\typescript\lib\typescript.js:106102:72
    at runWithCancellationToken (E:\Temp\node_modules\typescript\lib\typescript.js:106205:24)
    at Object.emit (E:\Temp\node_modules\typescript\lib\typescript.js:106102:26)
    at getFileEmitOutput (E:\Temp\node_modules\typescript\lib\typescript.js:108003:26)
    at updateShapeSignature (E:\Temp\node_modules\typescript\lib\typescript.js:108239:36)
    at getFilesAffectedByUpdatedShapeWhenModuleEmit (E:\Temp\node_modules\typescript\lib\typescript.js:108442:46)
    at Object.getFilesAffectedBy (E:\Temp\node_modules\typescript\lib\typescript.js:108194:144)

以下是使用 Lerna 构建文件夹的方式：（示例 github 存储库 - Link）

-- packages
   -- core-app (Angular project)
   -- shared (Shared project from where the angular project would utilize some types)

根级别tsconfig.json

{
    "compilerOptions": {     
      "baseUrl": "./",      /* Enable incremental compilation */
      "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
      "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015',
      "strict": false,                           /* Enable all strict type-checking options. */
      // "esModuleInterop": true,                  
      "skipLibCheck": true,                     /* Skip type checking of declaration files. */
      "forceConsistentCasingInFileNames": true,  /* Disallow inconsistently-cased references to the same file. */
    },
    "references": [
      { "path": "packages/shared" },
      { "path": "packages/core-app" }
    ]
  }

共享项目tsconfig.json

{
    "extends": "../../tsconfig.json",
    "compileOnSave": false,
    "compilerOptions": {
      "baseUrl": "./",
      "outDir": "lib",
      "sourceMap": true,
      "downlevelIteration": true,
      "allowSyntheticDefaultImports": true,
      "experimentalDecorators": true,
      "module": "es2020",
      "moduleResolution": "node",
      "importHelpers": true,
      "declaration": true,
      "declarationMap": true,
      "lib": [
        "es2018",
        "dom"
      ],
      "composite": true,
      "paths": {
        "@demo/core-app/*": ["../core-app/src/*"],
        "@demo/shared/*": ["./src/*"]
      }
    },
    "references": [
      { "path": "../core-app" } 
    ]  
  }

核心应用程序 (Angular) tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": true,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "composite": true,
    "paths": {
      "@demo/core-app/*": ["src/*"],
      "@demo/shared/*": ["../shared/src/*"]
    }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  },
  "references": [
    { "path": "../shared" } 
  ]  
}

Answer 1

我认为你不需要在 tsconfig.json 两边添加引用和路径，lerna 应该能够在引导后为你完成。

1.在 tsconfig.json

中删除 references、paths 和 composite

删除引用和路径后，您应该能够看到一个不同的错误，指示缺少 @demo/shared/models/ExampleModel 模块。

2。移动共享模块中的 models 文件夹

要获得 @demo/shared/models/ExampleModel 的确切路径，请将 models 文件夹移动到共享模块的根目录并删除 src 文件夹。

3。使用接口或类型进行类型定义。否则，您将遇到“严格 Class 初始化”错误

shared/models/ExampleModel.ts

export interface ExampleModel{
    Id: number;
    Name: string;
}

~~4.添加 index.ts 到导出类型以供将来扩展~~

~~shared/models/index.ts~~ 从“./ExampleModel”导出 *

~~5.在共享模块~~

中公开一个入口点

~~在package.json中添加主入口点~~

~~shared/package.json~~

~~{ "name": "@demo/shared", ... "main": "models/index.ts" }~~

6.在 core-app

中添加 @demo/shared 包的开发和对等依赖

core-app/package.json

"peerDependencies": {
    "@demo/shared": "^0.0.1"
},
"devDependencies": {
    ...
    @demo/shared": "^0.0.1",
    ...
    "typescript": "~4.1.5"
}

typescript should be below 4.2.0 for angular 11

7.修复 app.component.html

中的拼写错误

应该是例子而不是例子*

<div *ngFor="let example of examples"> 
  {{example.Name}}
</div>

8.助推

npx lerna bootstrap --hoist

更多关于 hoist

9. 运行应用程序

npx lerna run start --scope=@demo/core-app

这里是 working repo 供您参考。详情可以看最后的commit，上面的步骤就结束了。

Mono Repo：访问项目外部的打字稿文件会出现 'pos' 未定义错误

Mono Repo: Accessing typescript file outside of project gives 'pos' undefined error

typescript

monorepo

angular