我可以为不同的应用程序重复使用组件吗？

Question

我是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应用程序的配置设置。

如果需要，我可以分享一些我尝试过的代码，但我不确定分享什么是有用的，请请求您认为可能有用的内容，我会分享给您。

- Donal Rafferty

Answer 1

我认为最常见的方法是建立一个发布NgModule的单独库，就像Angular本身、Angular Material 2库和其他库一样。然而，这需要更多的工作来设置库的构建脚本，并使其更难进行调试。

另一个选项是将所有应用程序放在一个单独的TypeScript项目中，每个项目都有不同的入口点文件并使用Angular引导函数。

- Roman Kolesnikov

---

谢谢，请问你能提供一个链接或额外的信息，解释为什么库会更难调试吗？如果该库是自包含的Angular项目，它是否可以像其他Angular项目一样进行调试？您是指在导入库的应用程序中调试库变得困难了吗？ - Donal Rafferty

是的，你可以在库中拥有自包含的应用程序，就像这里 https://github.com/angular/material2/tree/master/src/demo-app/。然而，使用库来调试应用程序中的问题会更加困难 - 我更喜欢在库内模拟问题并在那里进行调试。 - Roman Kolesnikov

谢谢 @Rem，将一个内部的Angular应用程序服务于主要的Angular应用程序内是否更容易？我的想法是有一个地方可以运行类似 "gulp serve components" 的命令，并加载一个展示可用常见组件的应用程序。 - Donal Rafferty

是的，我使用webpack，在那里我只需要更改包含ng bootstrap的入口文件，我认为使用systemjs也不难（只需看看material2-他们用gulp做到了）。 - Roman Kolesnikov

Answer 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。现在在“components”中，我通常会使用Git子模块共享这些组件，以便可重复使用的“组件”位于它们自己的存储库中，并可以作为子模块拉入任何项目。

- danday74