Angular NX Monorepo动态模块联邦：远程模块能否加载其他远程模块路由？

支持在远程模块的路由中加载另一个远程模块，你遇到的报错本质是remote-1无法获取到remote-2的模块联邦定义信息，以下是具体解决步骤：

1. 全局共享远程模块定义 #

默认只有壳应用（shellApp）持有所有远程模块的配置信息，remote-1无法直接读取remote-2的定义。你需要在shellApp中把所有远程模块的定义全局暴露，让所有加载的远程模块都能访问：

在shellApp的main.ts中添加以下代码：

import { setRemoteDefinitions } from '@nx/angular/mf';
// remote-entry.json 是NX构建时自动生成的远程模块配置文件
import remoteDefinitions from './assets/remote-entry.json';

// 将所有远程模块定义设置为全局可用
setRemoteDefinitions(remoteDefinitions);

2. 配置remote-1的嵌套路由 #

在remote-1的路由配置中，使用loadRemoteModule正确加载remote-2的路由模块：

import { Routes } from '@angular/router';
import { loadRemoteModule } from '@nx/angular/mf';
import { Remote1Component } from './remote1/remote1.component';

export const routes: Routes = [
  {
    path: '',
    component: Remote1Component,
    children: [
      {
        path: 'xxx',
        // 第一个参数是remote-2的名称（需与shellApp中配置的一致），第二个是remote-2暴露的路由模块路径
        loadChildren: () =>
          loadRemoteModule('remote-2', './Routes').then(m => m.Remote2RoutesModule)
      }
    ]
  }
];

3. 验证remote-2的暴露配置 #

确保remote-2的project.json中正确暴露了路由模块，让其他模块可以加载：

// apps/remote-2/project.json
"targets": {
  "build": {
    "options": {
      "exposes": {
        "./Routes": "apps/remote-2/src/app/routes/routes.module.ts"
      }
    }
  }
}

完成以上步骤后，remote-1就能正确识别并加载remote-2的模块，实现/citizen/xxx路径下保留remote-1内容同时加载remote-2的需求。

内容的提问来源于stack exchange，提问作者Nicolas Gillard