Angular Router use function to get routes

Question

How i can call function in routes config to set children routes at Angular 5? Example of code:

export const homeRoutes: Routes = [
  {
    path: 'home',
    component: HomeContainer
    children: [
      getChildrenRoutes()
    ]
  }
]

@NgModule({
  imports: [
    RouterModule.forChild(homeRoutes),
  ],
  ...
})
export class HomeRoutingModule {}

Function getChildrenRoutes() return Route. In JIT mode it work well, but if i make AoT building it throws error:

ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function ...

Hm.. checked gist.github.com/chuckjaz/65dcc2fd5f4f5463e492ed0cb93bca60 and its true. @JBNizet any ideas how to set to routes object, where called function? Tried use router.resetConfig(homeRoutes) in HomeRoutingModule constructor but with this approach i cannot enter the routes. — rimlin
Please include your code for getChildrenRoutes() in the question — Mark Leong

H-a-Neo H-a-Neo · Accepted Answer · 2018-01-19T17:43:14

first you have to configure main routing on the Main Model (NgModel). in a separate class (app.module.routing.ts) you have to implement main routing with children. it will be closer as follows

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path:'login',
    component:LoginComponent
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule',
      },
      {
        path: 'auth',
        loadChildren: './auth/auth.module#AuthModule'
      },
      {
        path: 'masterdata',
        loadChildren: './masterdata/master.module#MasterModule'
      }
     
    ]
  },
];
@NgModule({
  imports: [ RouterModule.forRoot(routes)],  /*, { enableTracing: true }) */ 
  exports: [ RouterModule ],
  providers:[AuthGuard,OnlyLoggedInUsersGuard,GuardService]
})
export class AppRoutingModule {}

so this route expected to have 3 more sub modules 1.dashboard 2.auth 3.masterdata

so you may need to create folder for each module and have one main NGModule and routing module for each. here is once of those sub module

const routes: Routes = [
    {
        path:"",
        data:{
          title: "MasterData"
     },
        children:[
            {
                path:"apptypes",
                component:ApprovalTypesComponent,
                data:{
                    title:"Approval Types"
                },
                canActivate:[OnlyLoggedInUsersGuard,AuthGuard]
            }
        ]
    }
];

@NgModule({
    imports:[RouterModule.forChild(routes)],
    exports:[RouterModule]
})

export class MasterRoutings{}

loadChildren: './masterdata/master.module#MasterModule'

this line will load the sub module in the "./masterdata/master.module" path and module need to export the class MasterModule so then angular will load all the routes from that class and add to main routing table.

hope this will help thanks

Angular Router use function to get routes

1 Answers