如何在Angular中动态设置Module Federation远程入口的运行时URL？

核心思路 #

借助Angular的依赖注入能力，在路由的loadChildren回调中获取已通过APP_INITIALIZER完成初始化的EnvironmentService实例，从而拿到动态加载的远程入口URL。

实现步骤（Angular 14+） #

1. 确认APP_INITIALIZER配置完成
   确保EnvironmentService已通过APP_INITIALIZER完成API请求，将远程入口URL赋值给authUrl属性，且初始化逻辑返回Promise，保证路由加载前URL已就绪。

2. 修改路由配置代码
   在loadChildren的回调函数中，用Angular内置的inject()函数直接获取EnvironmentService实例，动态传入remoteEntry：

import { inject } from '@angular/core';
import { loadRemoteModule } from '@angular-architects/module-federation';

const routes: Routes = [
    {
        path: '', // Angular路由path无需开头的斜杠
        resolve: {
            data: DataResolver          
        },
        loadChildren: () => {
            // 获取已初始化的EnvironmentService实例
            const envService = inject(EnvironmentService);
            return loadRemoteModule({
                remoteName: 'authorization',
                remoteEntry: envService.authUrl,
                exposedModule: 'AuthorizationModule'
            }).then(m => m.AuthorizationModule);
        }
    }
    // 其他路由配置...
];

兼容Angular 14以下版本 #

如果项目版本低于Angular 14，无法直接使用inject()，可通过全局Injector实例获取服务：

1. 在根模块中导出Injector

import { Injector, NgModule } from '@angular/core';

// 全局导出Injector实例
export let appInjector: Injector;

@NgModule({
  // 模块配置项
})
export class AppModule {
  constructor(private injector: Injector) {
    appInjector = injector;
  }
}

2. 在路由中使用全局Injector获取服务

import { loadRemoteModule } from '@angular-architects/module-federation';
import { appInjector } from './app.module';

const routes: Routes = [
    {
        path: '',
        resolve: {
            data: DataResolver          
        },
        loadChildren: () => {
            const envService = appInjector.get(EnvironmentService);
            return loadRemoteModule({
                remoteName: 'authorization',
                remoteEntry: envService.authUrl,
                exposedModule: 'AuthorizationModule'
            }).then(m => m.AuthorizationModule);
        }
    }
];

关键注意事项 #

• 必须保证APP_INITIALIZER的初始化逻辑在路由加载前完成，否则authUrl会处于未定义状态，导致远程模块加载失败。
• 路由的path属性不要以斜杠开头，Angular路由会自动处理路径拼接。

内容的提问来源于stack exchange，提问作者M Pumpkin