在子模塊中使用通配符“**”的 Angular 8 路由到 404 會覆蓋父模塊路由到其他動態模塊嗎？

Question

問題可能看起來很復雜，所以：

模塊設置：

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

路由模塊：

應用程序

基本上是<router-outlet></router-outlet> ，所有其他的東西都發生在子模塊中：

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是App模塊的子級，它的空路徑'' （或'/' ）將被放置在那里。 MainComponent是帶有<router-outlet></router-outlet>內容的頁眉。 默認情況下，它填充了HomeComponent （路由'' ），但也可以匹配到'/page1'或'/page2' 。 現在請注意，有一個'**'通配符應該捕獲所有不匹配的路徑並將它們顯示在MainComponent插座中（這樣頁面內就有 404 帶有標題）。

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 { }

管理員 [動態]

類似於Main但從App動態加載。 也有內部 404 通配符。

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 { }

問題是，由於Main路由以'' ( '/' ) 開頭，它的 404 通配符'**' MainComponent了App模塊的'/admin'路徑，我們最終在MainComponent得到 404（帶有標題的那個）。 在嘗試從MainComponent鏈接到 /admin 以及在瀏覽器中輸入路徑時都會發生這種情況。 Main模塊隱藏父路由。

要求是Main模塊不能知道Admin模塊（所以我不能從Main模塊延遲加載 Admin 模塊，這就是為什么它被放置在App模塊中），但同時（ Main模塊）可以有 404 的通配符.

我知道我可以創建其他路徑，例如：

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

...但我真的希望它是：

page1
page2
admin/page1
admin/page2

是否有子模塊通配符不影響父模塊的解決方案？

Answer 1

在app-routing.module.ts指定main模塊

如

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

];

確保它在管理模塊之上