Angular 5 Routing - Empty Path not Matching

Question

I am confused what's wrong with this routing...

app.module.routing:

...
  {
    path: 'path1',
    canActivate: [Path1Guard],
    loadChildren: './path1/path1.module#Path1Module',
  },

path1.routing.module:

const path1Routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

As far as I understand, navigating to /path1 should result here in AuthenticatedLayoutComponent being loaded, and then Path1Component being loaded in the router outlet of AuthenticatedLayoutComponent.

If I make the path more specific:

  const path1Routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent,
    children: [
      {
        path: 'subpath1',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

... and navigate to /path1/subpath1, that is exactly what happens. Without the subpath, though, the Layout component loads but loads nothing in the router outlet. So what's wrong with the way I have it? Thanks.

Answer 1

I believe your problem will be solved if you set the configuration like this

const path1Routes: Routes = [
  {
     path: 'path1',
     component: AuthenticatedLayoutComponent,
     children: [
      {
        path: '',
        pathMatch: 'full',
        component: Path1Component,
      },
    ],
   },
 ];

You use empty paths when you want to instantiate a component without the need for defining a new url route.

If you leave both empty it would probably just try to resolve to the first one.

By setting the configuration as above it will recognise you are on the route you defined previously on the lazy loading and then it will load the child component because it will match the empty path