Add Route Dynamically To Lazy Loaded Module Angular 8

Question

I have a shared module which have a route defined like below

export const HrRouting: Routes = [
  {
    path: '',
    component: HrComponent,
    data: {
      breadcrumb: 'HR'
    },
    children: [
      {
        path: 'settings',
        component: SalesOneProHrSettingsComponent,
        data: {
          acl: 'hr::hr',
          breadcrumb: 'Settings'
        },
      }
    ]
  }
]

I am loading this module in two different modules using loadChildren. In one of the module I want to add one more path to this route. For example

HrRouting['children'].push({
        path: 'reports',
        component: HrReportComponent
});

How can I achieve this?

Answer 1

You can use the same pattern as you are following above.

{
path:'',
component: something,
children:
   [
     path: 'settings',
     component: settings,
     children: 
        [
           path: 'nested',
           component: nested
        ]
   ]
}

Answer 2

Instead of Push, you can use unshift as follow

this.router.config.unshift(
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component }
);

while using push, the route is being updated to the end, which is after path:'**' , so those routes will be unreachable.

Please check the link for more info https://medium.com/@DenysVuika/dynamic-routes-with-angular-6fda03b7fa2c