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

Question

我正在尝试构建一个Angular mono repo。然而，当我尝试run lerna run start --scope=@demo/core-app时，我会得到以下错误：

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

以下是使用Lerna构建文件夹的方式：(示例github-reo-链接(

-- 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.使用接口或类型进行类型定义。否则，您将点击"；严格类初始化"；错误

共享/models/ExampleModel.ts

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

4.将index.ts添加到导出类型中以获得未来的可扩展性

共享/models/index.ts导出*from'/示例模型'

5.在共享模块中暴露一个入口点

package.json中，添加主入口点

shared/package.json {"name"："@demo/shared"，。。。"main"："模型/索引.ts"}

6.在core-app中添加@demo/shared包的dev和peer依赖项

core-app/package.json

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

对于angular 11 ，typescript应低于4.2.0

7.修复app.component.html中的拼写错误

应该是示例，而不是exmaples*

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

8.加强

npx lerna bootstrap --hoist

• 关于起重机的更多信息

9.运行应用程序

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

---

这是工作回购供您参考。有关详细信息，您可以阅读上一次通信，它在上述步骤中得出结论。