App.route.ts customization

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?


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 = [
    path: routes[1].path,
    component: routes[1].component,
    children: [
         path: 'report/:relName',
         component: ReportComponent
  1. Import import { RouterModule } from '@angular/router'; and add the custom routes to the imports section of ApplicationModule:
  declarations: [
  imports: [
    environment.production ? ServiceWorkerModule.register('ngsw-worker.js') : [],
  providers: [
  bootstrap: [AppComponent]
export class AppModule {

Thanks for the kindness of good angular tips.

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.

1 Like