0

Estou desenvolvendo uma aplicação angular2 e queria criar rotas dinâmicas, que fossem geradas a partir de um arquivo .json. Pesquisando achei o seguinte código:

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;
}

Mas o seguinte erro acontece quando vou subir a aplicação

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

Não sei o que pode ser. Se alguém tiver uma solução que resolva este erro, ou algum outro jeito de criar rotas dinâmicas com angular2 seria bem útil. Já agradeço a a ajuda de todos.

1 Resposta 1

0

Descobri a resposta e para quem estiver com o mesmo problema segue o código que gera a solução, onde se consegue gerar menu dinâmico a partir do arquivo json. Primeiro precisa criar uma classe de rota:

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);

Depois é preciso criar cada módulo e criar uma sub rota como no código abaixo

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 {
}

Ainda não é um código 100% livre da declaração de rotas, porque cada modulo ainda deve declarar uma rota, apenas uma parte vem do arquivo json, mas já é uma solução.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .