在子模块中使用通配符“**”的 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) }

];

确保它在管理模块之上