'Dynamic Routes of RouteModule when using Module Federation Plugin
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?
Solution 1:[1]
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/
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Americo Perez |