我们如何使用 tsconfig“别名路径”导入 @ngModule 和其他定义

Question

回购：https://github.com/andreElrico/mono-repo-test

stackblitz: https://stackblitz.com/github/andreElrico/mono-repo-test (noop; 只是为了顺利导航)

让我们假设以下结构：

root/
├── projects/
│   ├── app1
│   ├── app2
│   ├── app3
│   ├── app4
│   ├── lib1

• app1 - 不起作用 "@lib1": ["projects/lib1/src/public-api"])。它是app2 和app4 的组合。
• app1 的错误消息：` projects/app1/src/app/app.component.ts:7:3 中的错误 - 错误 NG8001：'lib-lib1' 不是已知元素：
  1. 如果“lib-lib1”是一个 Angular 组件，则验证它是该模块的一部分。
  2. 如果“lib-lib1”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 （lib-lib1 组件） `
• app2 - works - 是角度引导方式。它在 dist/lib1 上使用 tsconfig -> path（构建库输出）
• app3 - works - 使用相对路径到确切的文件位置，正如大家所建议的那样
• app4 - works - 使用到 public_api.ts 的相对路径。

为什么app1编译不成功？这就是我想合作的情况？明智的做法应该是正确的：-/？我想让app1 工作的原因是我想在一个库上拉请求并且“测试应用程序”已经拥有所有导入“库样式”=>（例如@lib1）。因此，将“@lib1”的“正常”节点模块路径映射到库的确切源，这只是这个应用程序的兄弟姐妹，这将是非常棒的。有了它，我可以非常快速地调试和开发新功能。当然，我会从“test-app”的 package.json 中删除 @lib1。

Answer 1

您已将模块添加到提供程序中：

https://github.com/andreElrico/mono-repo-test/blob/6939e4a36cd64a2f9df8e8abc8e3addf162a75cf/projects/app1/src/app/app.module.ts?fbclid=IwAR14_D6YilhHEsNep7azHpHPrGcMDlVAruDQa7dYDBIsBlkdGFaFyW-u-LE#L15

如果您将模块添加到导入数组中，它应该可以按预期工作。

Answer 2

如果你的模块在apps/app1目录下，而你要导入的共享组件在sharedLibs/lib1；做吧：

import { component } from "../../sharedLibs/lib1"

你可以构建一个有很多上下目录遍历的系统这种方法。我首选的方法是在私有 npm 存储库中为演示项目之外的任何内容提供一个单独的库。

---

编辑：

通过别名访问库而不遍历路径结构；您应该可以编辑tsconfig.json 文件。

寻找compilerOptions.paths：

"paths": {
  "lib1/*": ["../../sharedLibs/lib1/*"],
  "lib2/*": ["../../sharedLibs/lib2/*"],
  "lib3/*": ["../../sharedLibs/lib3/*"]
}

这些路径应该在 node_modules 之前查看库项目。