App.route.ts customization

[villar]

How to customize app.route.ts?
I want to include the SSRS report menu in the main menu.
I modified the ReportName property for {{relato}} and report.component.ts to use url param as the report name (see code).
I need app.route.ts as shown below.
Any suggestion?

[korchev]

Hi,

You can try something like this:

1. Open the app.module.ts - Radzen generates it only once and you can customise it. The app.routes.ts file is generated every time and will overwrite any changes.
2. Import the generated routes import {routes} from './app.routes'; and the component import {ReportComponent} from './report/report-component';
3. Create the new route:

const customRoutes = [
  routes[0],
  {
    path: routes[1].path,
    component: routes[1].component,
    children: [
      ...routes[1].children,
      {
         path: 'report/:relName',
         component: ReportComponent
      }
    ]
  }
];

4. Import import { RouterModule } from '@angular/router'; and add the custom routes to the imports section of ApplicationModule:

@NgModule({
  declarations: [
    ...AppDeclarations
  ],
  imports: [
    environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [],
    AppImports,
    RouterModule.forRoot(customModules)
  ],
  providers: [
    ...AppProviders
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

[villar]

Thanks for the kindness of good angular tips.

[korchev]

Frankly this shouldn’t be needed. We should support parameters in the navigation items and Radzen should generated the route automatically. Logging this for implementation.