title: Angular routing - Default child route being activated at root route level
body: <p>I am having this problem in my Angular 5 application where a child route is getting activated at a router-outlet that should enable a root route. I am hoping someone reading this will be able to spot the problem in my route definitions that I have not been able to spot for the last couple of days.</p>
  
  <p>My Angular application has 3 nested route-levels. I have the routes defined in separate modules.</p>
  
  <p>In the app module, I have defined the root routes as:</p>
  
  <pre><code>const mainRoutes: Route[] = [
      {
          path: '', redirectTo: 'mainApp', pathMatch: 'full'
      },
      {
          path: 'mainApp', canActivate: [AuthGuardService], component: TabbarComponent,
          children: [
              { path: 'home', canActivate: [AuthGuardService], component: HomeComponent },
              { path: 'books', canActivate: [AuthGuardService], loadChildren: () =&gt; BookshModule },
              { path: 'authors', canActivate: [AuthGuardService], loadChildren: () =&gt; AuthorsModule },
              { path: 'research-articles', canActivate: [AuthGuardService], loadChildren: () =&gt; ResArticlesModule },
          ]
      },
      {
          path: 'login', component: LoginComponent
      },    
      {
          path: '**', redirectTo: 'mainApp', pathMatch: 'full'
      }
  ];
  
  @NgModule({
      imports: [
          RouterModule.forRoot(mainRoutes, { enableTracing: false })
      ],
      exports: [
          RouterModule
      ]
  })
  </code></pre>
  
  <p>For the BooksModule (as also the AuthorsModule and ResArticlesModule), the routes look like:</p>
  
  <pre><code>const bookroutes: Route[] = [
      {
          path: '', component: BooksComponent,
          children: [
              { path: 'fiction',  canActivate: [AuthGuardService], component: FictionComponent },
              { path: 'non-fiction',  canActivate: [AuthGuardService], component: NonFictionComponent },
              { path: 'autobiographies',  canActivate: [AuthGuardService], component: AutoBiographiesComponent }
          ]
      }
  ];
  
  @NgModule({
      imports: [
          RouterModule.forChild(bookroutes)
      ],
      exports: [
          RouterModule
      ]
  })
  </code></pre>
  
  <p>What happens is that when the appication loads, the root router-outlet loads the default route of the bookroutes at the top-most router-outlet where I expect the mainApp route from the root routes to be displayed. Don't quite know why that is happening.</p>
  
  <p>If I change the default book route to non-default (that is, change</p>
  
  <pre><code> path: ''
  </code></pre>
  
  <p>to</p>
  
  <pre><code> path: 'books'
  </code></pre>
  
  <p>), it then loads the default route of ResArticlesModule. If I change the default route there too, it loads the default route of the 'AuthorsModule'. So for some reason, the router is loading the first available default child route where a root route is expected.</p>
  
  <p>I am sure this is an artifact of misconfigured routing on my part. Can someone help me find what I am doing wrong?</p>