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

时间:2016-10-06 15:19:58

标签: angular typescript gulp systemjs angular-components

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

如果需要,我可以分享一些我尝试过的代码,但我不确定分享的内容是什么,所以请索取可能有用的内容,我会分享。

2 个答案:

答案 0 :(得分:4)

我认为最通用的方法是构建一个发布NgModule的独立库 - 就像Angular本身,Angular Material 2库和其他人一样。但是,为库设置构建脚本需要更多的努力,并且使调试更加困难。

另一种选择是为所有具有不同入口点文件的应用程序创建一个TypeScript项目,并为每个项目使用Angular bootstrap函数

答案 1 :(得分:0)

我按照以下方式组织我的组件:

/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子模块在项目中共享这些组件,这样可重用的“组件”将存在于他们自己的存储库中,并且可以作为子模块被提取到任何项目中。