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

Question

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

下面是我们的多项目应用程序的当前结构：

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

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

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

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

谢谢。

Answer 1

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

第 1 步 - 您必须创建单独的“共享模块”或任何您喜欢的名称，模块应该不在使用项目中。

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

示例-

解决方案一

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

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

Answer 2

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

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

Angular 9 - Use shared components coming from a shared project in other project's sub-modules

architecture

web-component

typescript

angular

angular9