Angular routing - Default child route being activated at root route level

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.

My Angular application has 3 nested route-levels. I have the routes defined in separate modules.

In the app module, I have defined the root routes as:

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: () => BookshModule },
            { path: 'authors', canActivate: [AuthGuardService], loadChildren: () => AuthorsModule },
            { path: 'research-articles', canActivate: [AuthGuardService], loadChildren: () => ResArticlesModule },
        ]
    },
    {
        path: 'login', component: LoginComponent
    },    
    {
        path: '**', redirectTo: 'mainApp', pathMatch: 'full'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(mainRoutes, { enableTracing: false })
    ],
    exports: [
        RouterModule
    ]
})

For the BooksModule (as also the AuthorsModule and ResArticlesModule), the routes look like:

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
    ]
})

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.

If I change the default book route to non-default (that is, change

 path: ''

to

 path: 'books'

), 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.

I am sure this is an artifact of misconfigured routing on my part. Can someone help me find what I am doing wrong?

Currently working on my own Angular project and incorporating routes into my application with various child routes independent features. I see that the comment was was the correct answer but not formally placed under the the answer page so this is my submission for other to make it easier to see.

When creating children routes for sub components, you need to ensure that the order for your imported modules in any of your app.module and feature.modules are placed in order of accordance of how your route is built in your app-routing.module and feature-routing.modules.

If you are lazily loading components into your application and are declared in the route path, you will need to place the child module underneath the parent module so the application can read the parent module first and handle the routing from there. Otherwise if you have them eagerly loaded then the child module will need to be above the parent module to detect that it exists which I find harder to route myself. examples below

Lazy Loading (Order needs to be in decending order from Parent to child)

• app.module.ts

  imports: [
     AppRoutingModule,  
     BookshModule, // from here order doesn't matter as much.  
     AuthorsModule,  
     ResArticlesModule  
  ]
  

Eager Loading (Order is depending on what component you want rendered first from serving your application and work on routing from there)

• app.module.ts

   imports: [    
       BookshModule,   
       AuthorsModule,   
       ResArticlesModule,   
       AppRoutingModule  
   ]
  

I know I may be missing some stuff here but this will get anyone in the right direction and if anyone else can add to this please do so.