Dynamic routes with angle 2

Question

Dynamic routes with angle 2

Navigation

#1 by (0 votes)

0

I'm developing an angular application2 and wanted to create dynamic routes, which were generated from a .json file. Searching 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'm uploading 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.module.ts

I do not know what it can be. If someone has a solution that solves this error, or some other way of creating dynamic routes with angular2 would be very useful. I thank you all for your help.

javascript node.js typescript angular

asked by anonymous 06.02.2017 / 19:22

1 answer

Import workbook from another worksheet into a new workbook in the current worksheet problem in insert using adoconnection

score 0 · Accepted Answer

I found the answer and for those with the same problem follows 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 subroutine 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 a 100% free route declaration code, because each module must still declare a route, only part comes from the json file, but it is already a solution.