I would like to add children for routes with loadRemoteModule dynamically, eg in this case:
const routes: Routes = [
{
path: '',
loadChildren: () => import('./test/test.module').then(m => m.TestModule),
canLoad: [AuthGuard]
},
{
path: '**',
loadChildren: () => import('./not-found/not-found.module').then(m => m.NotFoundModule),
canLoad: [AuthGuard]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
const routes: Routes = [
{
...
},
{
path: ':params',
component: TestComponent,
resolve: {
layout: TestResolver
},
children: [
{
path: '',
loadChildren: () => loadRemoteModule({
remoteName: 'test1',
remoteEntry: '/c/test1/remoteEntry.js',
exposedModule: 'Test1Module',
}).then(m => m.Test1Module)
},
{
path: '',
loadChildren: () => loadRemoteModule({
remoteName: 'test2',
remoteEntry: '/c/test2/remoteEntry.js',
exposedModule: 'Test2Module',
}).then(m => m.Test2Module)
}
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TestRoutingModule {
}
I have 2 loadChildren in the same path (TestRoutingModule), so it's wrong because I don't need load 2 mf in this case. So i would like to push children dynamically - If i need test 1 a would like to set test1, if test2 - just set test2 config.
I tried with resolver like below:
@Injectable()
export class TestResolver implements Resolve<Test[]> {
constructor(private appService: AppService, private router: Router) {
}
resolve(route: ActivatedRouteSnapshot): Test[] | Observable<Test[]> {
if (route.params.params === 'test1') {
route.routeConfig.children = [];
route.routeConfig.children.push({
path: '',
loadChildren: () => loadRemoteModule({
remoteName: 'test1',
remoteEntry: '/c/test1/remoteEntry.js',
exposedModule: 'Test1Module',
}).then(m => m.Test1Module)
},)
} else {
route.routeConfig.children = [];
route.routeConfig.children.push({
path: '',
loadChildren: () => loadRemoteModule({
remoteName: 'test2',
remoteEntry: '/c/test2/remoteEntry.js',
exposedModule: 'Test2Module',
}).then(m => m.Test2Module)
})
}
}
}
my html:
<div *ngFor="let test of tests" [ngSwitch]="test.type">
<router-outlet *ngSwitchCase="'test1'" name="test1"></router-outlet>
<router-outlet *ngSwitchCase="'test2'" name="test2"></router-outlet>
</div>
but it doesnt work as I expected. How can I achieve this goal and set children dynamically?