我可以跨应用重用组件吗？

Posted 2023-03-13

【中文标题】我可以跨应用重用组件吗？

【英文标题】：Can I reuse components across apps?

【发布时间】：2017-02-15 10:14:49

【问题描述】：

我是 Angular2 的新手，我想知道是否有可能在另一个应用程序中从一个应用程序中重用整套表示组件？

例如，我有一个名为 MyApp 的 Angular 2 应用程序，其中我创建了一些常用组件，这些组件位于 app/components/common 文件夹中，每个都包含一个 TypeScript、Sass 和 html 文件。

我使用 Gulp 将 TypeScript 编译为 JS，将 Sass 编译为 CSS。

我现在发布这些通用组件可以在我的其他 Angular 2 应用程序中通用，因此我想在名为 MyOtherApp 的单独 Angular 2 应用程序中使用它们。

我希望能够从 MyApp 中提取所有常用组件，并能够在 MyOtherApp 中使用它们。

这可能吗？如果是这样，这种组件公共共享的最佳方法是什么？

正如我所说，我使用 Gulp 来构建/运行，还使用 ​​System.js 来配置 Angular 应用程序。

如果需要，我可以分享一些我尝试过的代码，但我不确定分享哪些内容有帮助，所以请请求可能有用的内容，我会分享。

【参考方案1】：

我认为最通用的方法是构建一个单独的库来发布 NgModule——就像 Angular 本身、Angular Material 2 库和其他库一样。但是，为库设置构建脚本需要更多的努力，并且更难以调试。

另一种选择是为所有具有不同入口点文件的应用程序创建一个 TypeScript 项目，并为每个项目提供 Angular 引导功能

【讨论】：

谢谢，您能否提供一个链接或其他信息，说明为什么库可能更难调试？如果库是它自己的自包含 Angular 项目，它可以这样调试吗？您的意思是在导入它的应用程序中调试库变得困难吗？

是的，你可以像这里 github.com/angular/material2/tree/master/src/demo-app 这样在库中拥有独立的应用程序但是使用库来调试你的应用程序中的问题会更加困难 - 我更愿意模拟应用程序中的问题库并在那里调试它们

谢谢@Rem，在主 Angular 应用程序中提供内部 Angular 应用程序会更容易吗？我想要做的是在某个地方可以运行 guld serve 组件，这将加载一个应用程序来展示可用的常用组件。

是的，我使用 webpack，我只需要更改包含 ng bootstrap 的入口点文件，我认为 systemjs 也不应该很难（看看 material2 - 他们用 gulp 做到了)

【参考方案2】：

我这样组织我的组件：

/routes
  /route1/
    route1component.ts
    /route1child1
    /route1child2
  /route2/
    route2component.ts
    /route2child1
    /route2child2

/apponents (project-level-reuse, must be used in at least 2 places with the app to be promoted to an apponent)
  /project-reusable-component

/components (cross-project-level-reuse, used across multiple projects)
  /cross-project-reusable-component

让我们假设使用 Git。现在在“组件”中，我通常可以使用 Git 子模块在项目之间共享这些，这样可重用的“组件”将存在于它们自己的存储库中，并且可以作为子模块被拉入任何项目。