I’m trying to load a module dynamically (depends on the number of algorithms in the backend application). The angular app compiles but doesn’t load once I add the routes dynamically.
If I add them statically (hardcoded) they load fine.
Thanks in advance!
Relevant code snippets below:
lab-routing.module.ts:
export const MLRoutes: Routes = [];
export const NormRoutes: Routes = [];
export const LAB_ROUTES: Routes = [{
path: '',
component: LabComponent,
children: [
{
path: 'Dashboard',
component: LabDashboardComponent,
},
{
path: '',
redirectTo: 'Dashboard',
pathMatch: 'full',
},
{
path: '**',
component: NotFoundComponent,
},
],
}];
lab-menu.ts:
export function insert_ml(algo: string): void {
ML_ITEMS.push({
title: algo,
icon: 'keypad-outline',
children: [
{
title: 'Datasets',
icon: 'activity-outline',
link: `/lab/${algo}/dataset`,
},
{
title: 'Results',
icon: 'bar-chart',
link: `/lab/${algo}/results`,
},
],
});
MLRoutes.push({
path: algo,
loadChildren: () => import('./ml-algo/ml-algo.module').then(m => m.MLAlgoModule),
});
}
lab-dashboard.component.ts:
public refresh() {
this.http.get('http://localhost:5000/refresh').subscribe(
data => {
if (data['success']) {
data['ml_algos'].forEach(algo => insert_ml(algo));
data['norm_algos'] .forEach(algo => insert_norm(algo));
build_menu();
}
},
);
}
ml-algo-routing.module.ts:
const routes: Routes = [{
path: '',
component: MLAlgoComponent,
children: [
{
path: 'dataset',
component: MLDatasetComponent,
},
{
path: 'results',
component: MLGraphsComponent,
},
],
}];