Angular Module Federation：如何为每个远程模块配置隔离路由？

Answer 1

解决方案取决于您希望将遥控器和外壳耦合到何种程度，以及您希望在哪里控制路线和导航。我成功使用的一种方法如下：

• Shell App 不知道它可以加载的遥控器的任何详细信息，只知道 MF 遥控器信息和每个遥控器的 baseHref 路由。
• Remote Apps 不知道有关 shell 或任何其他可能由 shell 加载的 Remotes 的信息
• 在任何时间点只能激活一个带路由的远程模块
• （可选）mflib - 你的共享库，用于 shell 和远程之间的通信、辅助函数等

远程应用将您要公开的遥控器部分放入专用的 NG 模块 FeatureModule，该模块导入 RouterModule.forChild 并为其组件设置路由。

src/app/
     |-app.module.ts  # your main module, - not exposed as mf remote 
     |-feature.module.ts   # your feature module, exposed as mf remote
       |-orders.component.ts
       |-remote-a.component.ts
     ...

当您将Remote-A 应用程序作为独立应用程序运行时，您可以急切地将FeatureModule 导入主AppModule（或者懒惰地，您的调用取决于用例，如果您有更多模块等）。如果您使用标准（急切）导入，那么您可以在根模块中设置RouterModule.forRoot，以使用您想要的任何路径导航到FeatureModule 的组件。 如果您延迟导入，则RouterModule.forChild 中定义的路由将相对于该模块延迟加载到根路由器的基本路径。您需要确保在功能模块中导航的任何地方都使用相对导航（例如this.router.navigate(['items'], { relativeTo: this.route })）。 例如，假设您的 Remote-A 项目中有 2 个组件，FeatureModule 中有 2 个对应的路由：

const MY_ROUTES =[
{ 
    path: '', 
    component: RemoteAComponent, 
    pathMatch: 'full'
},
{ 
    path: 'orders', 
    component: OrdersComponent
}
]

在急切模式下，您可以通过RouterModule.forRoot(MY_ROUTES) 在AppModule 中设置此路由，然后您可以使用http://localhost:4201 或http://localhost:4201/orders 导航到这些路由（前提是您没有设置不同的BASE_HREF...）。 或者，您可以使用延迟加载将这些路由设置为某些根路径的子路由，例如

//app.module.tsm import section:
RouterModule.forRoot([
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'feature',
        loadChildren: () => import('./feature.module').then(m => m.FeatureModule)
    }
])

//feature.module.ts
RouterModule.forChild(MY_ROUTES)

现在要访问OrdersComponent，您将使用http://localhost:4201/feature/orders，因为在我们的FeatureModule 中定义的所有路由都将与父路由（的子路由）相关，在本例中为/feature/

这样，您的FeatureModule 在哪个根 URL 下加载并不重要，它的内部路由将相对于根 URL 正确解析。

其他遥控器也一样，请确保将实际的远程模块提取到专用的角度模块中，并设置forChild 路由器。

壳：您需要以某种方式定义可用的遥控器 - 静态配置或动态构造它，例如通过对某个注册表端点进行 HTTP 调用、加载 JSON 文件等。

const microFrontends = [
    {
        baseUrl: "remote-a", //where should we append this to router
        moduleName: "FeatureAModule" //name of NG module class in your remote
        remoteEntry: 'http://localhost:4201/remoteEntry.js', //remote webpack url
        remoteName: 'remotea', //name of the remote module, 
        exposedModule: './FeatureAModule', //exposed module inside the webpack remote
    },
    {
        baseUrl: "remote-b",
        moduleName: "FeatureBModule"
        remoteEntry: 'http://localhost:4202/remoteEntry.js',
        remoteName: 'remoteb',
        exposedModule: './FeatureBModule',
    }
]

接下来，您定义路由 - 包括 shell 应用程序内部组件和远程模块的路由 - 对于远程，您只需指定 RemoteModule 应在其下插入其子路由的根路径，然后使用 @ 指定 loadChildren 属性987654348@ fn 来自 Manfred Steyers @angular-architects/module-federation lib。例如：

//app.module.ts
RouterModule.forRoot([
    { 
        path: '', //this is an example internal route to component that exists inside shell app
        component: HomeComponent,
        pathMatch: 'full' 
    },
    //we map each microfrontend entry to a lazy loaded Route object, 
    ...microFrontends.map(mf=> ({
        path: mf.baseUrl, // we insert any routes defined in the remote module we load 
        //as children of `mf.baseUrl` route
        loadChildren: () => loadRemoteModule(mf).then(m => m[mf.moduleName])
    }))
])

使用上面的示例配置，shell 最终会得到以下路由树：

/                  -> shell/HomeComponent.ts
/remote-a          -> lazy loaded module FeatureAModule from remote-a remote
    /            -> remote-a/FeatureModule/remote-a.component.ts
    /orders      -> remote-a/FeatureModule/orders.component.ts         

shell 可以在任何 URL 下挂载远程模块，例如foobar，然后导航到orders 组件形式远程-a 我们将使用/foobar/orders。因此，shell 可以完全控制根路由/url 结构，远程控制其子树中的路由/url。

如果您需要进行绝对导航，或在 Shell 和 Remotes 之间进行通信，请创建一个共享 Angular 库，使用共享 Angular 模块并通过单例服务 (providedIn: root) 进行通信。

现在，当您加载远程模块时，您无法将参数或 DI 令牌传递给远程模块（在 Angular 中存在一个问题），因此如果您的子/远程模块需要知道，它已安装在哪个 URL/路由下，您需要天真地解析浏览器 URL 并假设路径的第一段是您的根路径，或者使用共享服务（在 shell 中，当您调用 loadChildren 时，您可以为服务添加一些值，并且在您的远程模块中，您可以阅读它们）

Answer 2

太棒了！，您能否提供完整的源代码示例？