Angular 9 - 在其他项目的子模块中使用来自共享项目的共享组件

Question

在来自属于同一应用的共享项目的子项目中导入和使用共享组件时，我遇到了一个问题。

以下是我们的多项目应用的当前结构：

1. 根
   • 子项目（全新）
     • SharedModule -> 负责子项目共享组件的导入导出，只对它可用
     • AppModule -> 子项目子模块的收集器（应该如此）
   • 共享项目（已存在于应用中）
     • SharedModule -> 这在它的 forRoot() 方法中有一个 ModuleWithProviders 子句，它让 AppModule 可用于其他子项目
     • AppModule -> 可用于其他子项目及其声明和导出的所有组件（糟糕的解决方案，恕我直言）

我们的子项目已经被构造成子模块（即SharedModule），而Shared Projects只是一个普通的项目，有自己的AppModule，在同级插入了一个SharedModule。 每当我们尝试将共享项目导出的组件导入我们的子项目时，要么我们不让它们工作，要么我们用共享的 AppModule 覆盖子项目的 AppModule，丢失属于子项目本身。

我们尝试了几种解决方案，使用 forRoot() 调用整个共享项目的 SharedModule 和直接调用共享项目的 AppModule，但没有任何效果。

您对如何解决这个问题有什么建议吗？

谢谢。

Answer 1

在一个解决方案项目下的不同项目中共享一个组件。

步骤 1 - 您必须创建单独的“共享模块”或任何您喜欢的名称，模块不应消耗项目。

第 2 步 - 您的所有消费者项目都应使用“共享模块”或导入“共享模块”。

示例-

解决方案 1

-- Shared Module
--Project1
  --- Module1 (import shared module)
  --- Module2
--project2
  --- Module1
  --- Module2 (import shared module)

在您的场景中，我认为您可以下拉共享组件并创建一种共享控件库，您可以在不同的项目中使用该库。

Answer 2

我设法解决了这个问题。 我们遇到的问题与子功能模块内的导入顺序错误有关。顺序很重要！ :-)