Dynamic routes with angular 2

Question

I am developing an angular2 application and wanted to create dynamic routes, which would be generated from a .json.file. Searching I found the following code:

import { Routes ,RouterModule } from '@angular/router';

export const routes: Routes = getScreens();
export const routing = RouterModule.forRoot(routes);

export function getScreens() {
  var results :Array<Object> = Array<Object>();
  let screens :Array<any> = [
  {
    "title": "Home",
    "path":  "home",
    "component" : "app/home/home.module"
  },
  {
    "title":"Team",
    "path":"team",
    "component": "app/team/team.module"
  }
];

  results.push({ path: '' ,redirectTo: 'home', pathMatch:'full'});

  for (let entry of screens) {
    results.push({ path: entry.path, loadChildren: entry.component});
  }

  return results;
}

But the following error happens when I go up the application

client? 93b6:101 Error encountered resolving Symbol values statically. Calling Function 'getScreens', Function calls are not supported. Consider replacing the Function or lambda with a Reference to an Exported Function, resolving Symbol Routes in C:/Users/02501699165/Downloads/Angular2 Resetrouter/angular2-routertest/src/app/app.routing.ts, resolving Symbol routing in C:/Users/02501699165/Downloads/Angular2 Resetrouter/angular2-routertest/src/app/app.routing.ts, resolving Symbol routing in C:/Users/02501699165/Downloads/Angular2 Resetrouter/angular2-routertest/src/app/app.routing.ts, resolving Symbol Appmodule in C:/Users/02501699165/Downloads/Angular2 Resetrouter/angular2-routertest/src/app/app.module.ts, resolving Symbol Appmodule in C:/Users/02501699165/Downloads/Angular2 Resetrouter/angular2-routertest/src/app/app.modulets.

I don’t know what it might be. If someone has a solution that solves this error, or some other way to create dynamic routes with angular2 would be very useful. I appreciate all your help.

Answer 1

I found the answer and for those with the same problem follow the code that generates the solution, where you can generate dynamic menu from the json file. First you need to create a route class:

import { Routes ,RouterModule } from '@angular/router';
import { ModuleWithProviders} from '@angular/core';

export const routes: Routes = [
{
"path":  "home",
"loadChildren" : "app/home/home.module#HomeModule"
},
{
"path":"team",
"loadChildren": "app/team/team.module#TeamModule"
},
{
"path": "" ,
"redirectTo": "home",
"pathMatch": "full"
}];

export const routing: ModuleWithProviders  = RouterModule.forRoot(routes);

Then you need to create each module and create a subpath as in the code below

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from "./home.component";
import { Routes ,RouterModule } from '@angular/router';

const routes: Routes = [{ path: '', component: HomeComponent}];

@NgModule({
 imports: [
 CommonModule,
 RouterModule.forChild(routes)
],
declarations: [
 HomeComponent
],
providers: [

]
})
export class HomeModule {
}

It is not yet 100% free code from the route declaration, because each module must still declare a route, only a part comes from the json file, but it is already a solution.