Dynamic Routes of RouteModule when using Module Federation Plugin

Question

I'm developing a microfrontends application, using Module Federation Plugin. The routing of application container is:

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () =>
        loadRemoteModule({
            type: 'module',
            remoteEntry: 'http://localhost:2000/remoteEntry.js',
            exposedModule: './Module'
        })
        .then(m => m.AppModule)  
  },  
  {
    path: 'admin',
    loadChildren: () =>
        loadRemoteModule({
            type: 'module',
            remoteEntry: 'http://localhost:3000/remoteEntry.js',
            exposedModule: './Module'
        })
        .then(m => m.AppModule),
    canLoad: [AuthenticationGuard, AuthorizationGuard],
    canActivate: [AuthenticationGuard, AuthorizationGuard], 
    data:{
      roles:[RoleType.ADMIN]  
    }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I need to transform the urls of remoteEntry into dynamic url. For example:

  {
    path: 'login',
    loadChildren: () =>
        loadRemoteModule({
            type: 'module',
            remoteEntry: appConfig.protocol + '://' + appConfig.host + ':' + appConfig.port + '/remoteEntry.js',
            exposedModule: './Module'
        })
        .then(m => m.AppModule)  
  }

I don't want to use enviroment.ts.

Is there a solution?

score 0 · Answer 1 · answered May 17 '22 at 11:44

Not sure if this is technically the same thing but, you could create a config file that gets read at runtime (using http request) and pull the information you need from there.

Here's an example of what I'm referring to

https://www.angulararchitects.io/en/aktuelles/dynamic-module-federation-with-angular/

Dynamic Routes of RouteModule when using Module Federation Plugin

1 Answers1