Angular 8 routing to 404 using wildcard '**' in child module overrides parent module routing to other dynamic modules?

Question

Question might seem complicated, so:

Module setup:

- General (few common components and 404 page template)
- App (the app)
   |___Main (main www)
   |     |___General (uses)
   |___[DYNAMIC] Admin (admin panel)
         |___General (uses)

Routing modules:

App

Is basically <router-outlet></router-outlet> , all further stuff happens in sub-modules:

const routes: Routes = [
    { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Main

Since Main is child of App module, its empty path '' (or '/' ) will be placed there. MainComponent is page header with <router-outlet></router-outlet> for content. By default it is filled with HomeComponent (route '' ), but can also match to '/page1' or '/page2' . Now notice that there is '**' wildcard that is supposed to catch all unmatched paths and show them in MainComponent outlet (so that there is 404 inside page with header).

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            { path: '', component: HomeComponent },
            { path: 'page1', component: Page1Component },
            { path: 'page2', component: Page2Component },
            { path: '**', component: PageNotFoundComponent }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class MainRoutingModule { }

Admin [DYNAMIC]

Similar to Main but loaded dynamically from App . Also has internal 404 wildcard.

const routes: Routes = [
    {
        path: '',
        component: AdminComponent,
        children: [
            { path: 'page1', component: AdminPage1Component },
            { path: 'page2', component: AdminPage2Component },
            { path: '**', component: PageNotFoundComponent }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AdminRoutingModule { }

The problem is that since Main routing starts as '' ( '/' ) its 404 wildcard '**' shadows App module's '/admin' path and we end up with 404 inside MainComponent (the one with header). It happens both when trying to link from withing MainComponent to /admin and when typing path into browser. Main module shadows parent routing.

Requirement is that Main module can't know about Admin module (so I can't lazy load Admin module from Main module, that's why it is placed in App module), but a the same time ( Main module) can have wildcard for 404.

I know I could make additional path like:

main/page1
main/page2
admin/page1
admin/page2

...but I really want it to be:

page1
page2
admin/page1
admin/page2

Is there a solution for child module wildcard to not shadow parent?

Answer 1

Specify main module in app-routing.module.ts

such as

const routes: Routes = [
{
'path': '',
'loadChildren': () => import('./modules/home/main.module').then(m => m.MainModule)
},
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

];

Make sure it is above admin module