How to set a child component as a default route for a router-outlet?

Question

I am using Lazyloading and I have two router-outlets. the problem occurs when I want to navigate to another child route. I get this error,

TypeError: Cannot read property 'split' of undefined at defaultUrlMatcher (router.js:566) at match (router.js:2221) .....

My main app-router module looks like,

const appRoutes: Routes = [
    { path: '', redirectTo: 'web/welcome' , pathMatch: 'full' },
    { path: 'web', redirectTo: 'web/welcome' , pathMatch: 'full' },
    {
        path: 'web',
        loadChildren: 'app/core/website/modules/website.module#WebSiteModule',
        data: { preload: true }
     },
    {
        path: 'dbapp', canActivate: [AuthGuardService],
        loadChildren: 'app/core/database/modules/db.module#DbModule',
        data: { preload: true }
     },
    { path: '**', redirectTo: '/404',  pathMatch: 'full'},
    { path: '**', component: NotFoundComponent, data: { message: 'We Could Not Serve Your Request!'}},
];

and for dbapp I have this routing module,

const dbRoutes: Routes = [
  {
    path: '',
    component: DbHomeComponent,
    data: { preload: true },
    pathMatch: 'full',
    children: [
      { path: '', component: UserDashboardComponent },
      {
        path: 'registry',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['reg'] } },
        loadChildren:
          'app/core/database/database-cores/registry-core/modules/registry.module#RegistryModule'
        // canActivateChild: [RoleGuardService]
      },
      {
        path: 'embryology',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['emb'] } },
        loadChildren:
          'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
      },
      {
        path: 'nursing',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['nur'] } },
        loadChildren:
          'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
      }
    ]
  },
];

My map looks like the following,

Router Map, Underlined components are router-outlets

so according to my config. the routing starts at https://www.artngcore.com:4200/web/welcome and after authentication the route changes to https://www.artngcore.com:4200/dbapp

I managed to navigate to UserDashboardComponent as a default route, my problem if I do routing to the other children, i.e. routerLink="/dbapp/registry"

How can I show a child component as a default route and navigate to other children routes?

Did you use something to auto generate that router graphic or did you manually create it? — Zze, Feb 28 '18 at 21:24
@Zze I am using [Augury](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en) — JSON, Feb 28 '18 at 21:26

score 3 · Accepted Answer · answered Feb 28 '18 at 22:38

solved, the answer is derived from here,

so my dbapp routing module should be like this,

const dbRoutes: Routes = [
  {
    path: '',
    component: DbHomeComponent,
    data: { preload: true },
    children: [
      { path: '', component: UserDashboardComponent },
      {
        path: 'registry',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['reg'] } },
        loadChildren:
          'app/core/database/database-cores/registry-core/modules/registry.module#RegistryModule'
        // canActivateChild: [RoleGuardService]
      },
      {
        path: 'embryology',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['emb'] } },
        loadChildren:
          'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
      },
      {
        path: 'nursing',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['nur'] } },
        loadChildren:
          'app/core/database/database-cores/embryology-core/modules/embryology-routing.module#EmbryologyRoutingModule'
      }
    ]
  }
];

all what I had to do is to change the routing matching strategy, pathMatch: 'full' should not be included

How to set a child component as a default route for a router-outlet?

1 Answers1