ionic 4 nested routes not working. Not loading loadchildren on url

Question

I have two pages 'items' and 'address'. Now I am trying to load address page on 'items/address' url, but I am getting redirected to the 'items' page only.

Here is my route on items.module.ts :

const routes: Routes = [
  {
    path: '',
    component: ItemsPage,
    children :[
      { path: 'address', loadChildren: '../address/address.module#AddressPageModule' },

    ] 
  },

];

I have all the pages in the pages directory. Thanks in advance

Answer 1

The problem is that the path 'items' is not defined of your url 'items/address'. Here's how I would do it -

const routes: Routes = [
  { path: '', redirectTo: 'items', pathMatch: 'full' },
  {
    path: 'items', children: [
      { path: '', loadChildren: './items/items.module#ItemsPageModule' },
      { path: 'address', loadChildren: './items/address/address.module#AddressPageModule' },
    ]
  }
];