将大型Angular 2应用与其中的多个小型应用组合

经过3个月的辩论和研究，关于在React（与Redux）和Angular 2之间进行选择的研究，我公司的前端团队最终决定采用Angular 2（因为它更适合我们的问题）。

我们正在从事企业应用程序业务，该业务目前由许多不同的前端技术组成（同时拥有整个后端RESTful），我们希望将其全部替换，并拥有一种技术来简化将来的培训和质量控制。

鉴于我们产品的性质，产品范围很广，并且其中包含模块，这些模块本身是不同的域，可以作为独立的应用程序制作，但产品本身位于单个URL中。

例;

我们将我的产品称为SuperApp。

作为UI，SuperApp具有标准的登录系统，并可以导航到子模块/子产品，因此工作流如下所示。

• 超级应用

  • 验证用户
  • 忘记密码向导
  • 无需身份验证即可访问公共页面

  • 认证用户

    • 导航系统

      • 家
        • 子产品1
        • 子产品2
        • 子产品3

      • 轮廓

        ...

        ...

      • 团体

        ...

        ...

请注意，在以上表示中，Sub-product1和Sub-product2是两个完全不同的领域，具有完全不同的业务领域。

我现在可以想到的是，我可以将SuperApp创建为单个Angular 2项目，仅包含与其自身相关的组件和视图，并且SuperApp还负责加载多个子应用程序；Sub-product1，Sub-product2（同样是不同的Angular 2项目，它们都有自己的package.json，webpack配置等）通过哑组件，并充当提供顶级路由的Shell和占位符来容纳这些子应用。

有一次，Sub-product1在壳体内加载时，它会自己的路由附加到当前路由SuperApp在已经登陆。

我想要分离的原因是因为这些不同的应用程序（当前使用ExtJS构建）具有专门的团队（我们是一家拥有500多个开发人员的公司），因此，如果他们拥有自己的Angular项目，则可以管理其工具并依赖于他们的喜好，而无需依赖父级父级应用。

但是我无法在官方的Angular文档中或网上找到任何地方是否可以嵌套Angular应用程序（以这种方式共享框架代码，而完全隔离子应用程序的依赖项并仅在应用程序加载时需要），或者是否有其他替代方法可以解决此问题。

任何指导，甚至任何相关文章的链接，将不胜感激。

您所描述的内容我通过模块热量知道。所以我将这样称呼。

我不会解决是否由于缺乏框架知识而导致角度支持模块的问题。另外，我认为您并不是真的想要这个。以我的理解，并且我希望您的后端能够反映出您想要将所有内容切成最小的部分（微服务）。

在这种情况下，图表上的每个点都应是其自己的独立应用程序。他们肯定必须根据每个职责相互沟通，以构成您描述的视图。您看到Google如何使用单独的url /工具/系统进行身份验证吗？Gmail并不关心该问题，这不是它的责任。甚至所有工具的蒙皮都位于中心位置，而不是位于每个工具中（您可以在材料设计中看到这一点）。资产位于每个项目/系统之外。

这样做可以提高系统的可重用性和灵活性。尽管在小型团队中，由于复杂性和时间原因，这是站不住脚的。现在，您的工作就是弄清楚您的案子在哪里。一切都在微服务和分离中，全部在一公斤或中间的某个地方。模块（如果可用）是您在每个点内使用的模块。

一种选择：您可以“硬链接”（而不是使用SPA链接）到子应用程序，并使每个子应用程序共享站点包装的依赖项。