Angular2镇静

Question

我正在研究微服务，更准确地说是 Angular2 微服务。主要思想似乎很简单，但它变得复杂，因为我想对不同的 Angular2 应用程序保持冷静。

我的意思是，假设我有 2 个应用程序，我没有太多控制权，应用程序 A 和应用程序 B，由不同的团队创建，每个服务不同的东西（一个可能是 2D 查看器，另一个是 3D 查看器）。我正在考虑构建某种组合代理，在其中定义一个带有一些自定义标签（例如 <service target = "url">）的 html 文件，然后让代理进行组合并将其提供给用户。

我已经研究了一段时间的网络，但我似乎无法找到有关 angular2 组合的任何内容。以下是我遇到的一些问题：

• 包含脚本的顺序。由于每个应用程序可能需要包含不同的脚本，因此不按正确的顺序包含它们可能会导致整个应用程序崩溃。

• 构建一个全新的“核心”组件，正确引导，只引导正确的组件等等。

• 确保一个应用的 css 不会覆盖另一个应用的 css

• 命名问题，由于应用不同，我可能会遇到同名的组件。

对我来说，所有这些问题似乎都可以通过解析每个文件并相应地修改来解决。问题是，如果 js 文件都被缩小和统一，那么同样的想法就不会完全奏效。此外，为每个请求执行此操作需要大量处理能力（我希望它有点热构建/加载）。

我应该采取哪些方法来构建这样的组合代理，是否有任何示例/文档说明如何做到这一点？

Answer 1

我不确定我是否理解您想要做什么，但我可以从您的要求中看出，您所需要的只是开箱即用的 Angular2 功能。

1) 包含脚本的顺序。由于每个应用程序可能需要 要包括的不同脚本，不包括在右边 订单可能会使整个应用程序崩溃。

2) 打造全新的“核心” 正确引导的组件，只有正确的 组件被引导等等。

3) 确保 css 从一个 应用程序不会从其他命名问题覆盖 css，因为应用程序是 不同的我可能会遇到同名的组件

我会回答你的观点：

1) 您只需在“应用程序路由”中使用动态模块加载，如下所示：

export function loadModuleA() {
    return System.import('./pages/module-A-view/a.module').then(mod => mod.ModuleA)
}

export function loadModuleB() {
    return System.import('./pages/module-B-view/a.module').then(mod => mod.ModuleA)
}

export const routes: Routes = [
    {
        path: 'core/sectionA',
        loadChildren: loadModuleA
    },
     {
        path: 'core/sectionB',
        loadChildren: loadModuleB
    },

如果你import ModuleA 中的库将不会在 ModuleB 中可用，除非你明确地export 它每个模块 A 和模块 B 将有他们的自己的依赖

2）您将“核心”指定为主要的app.module.ts，并在自己的模块文件中指定模块依赖项，很简单。

3) 你真的只需要一个主样式表，然后每个组件都可以有自己的自定义文件。如果使用angular cli，例如每次新建组件，cli都会生成组件文件、scss文件、html文件和spec文件。否则，您也可以自己轻松完成：

@Component({
    selector: 'whatever',
    templateUrl: './whatever.component.html',
    styleUrls: [ './whatever.component.scss' ]  
})
export class WhateverComponent

如果您想要一个特定于（比如说）模块 A 的所有组件的样式表，那么我不知道该怎么做。