angular ：加载通配符路由而不是急切加载模块中的路由

Question

我有一个包含 2 个功能模块的应用程序：1 个是延迟加载的，1 个是急切加载的。

在我的应用程序路由中，我想为“找不到页面”场景添加“**”通配符路由。

const routes: Routes = [
  { path: '', loadChildren: () => import('./landing-page/landing-page.module').then(m => m.LandingPageModule) },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

延迟加载模块工作正常。

现在我已经添加了带有自己的路由模块的急切加载模块。所以我上面的“应用程序路由”保持不变。我只是在我的应用程序模块中导入急切加载的模块。这是我急切加载的模块的路由配置：

const routes: Routes = [
  { 
    path:"people", 
    children: [
      { path: "invite", component: InviteComponent}
    ]}
];

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

我的问题是

当我在我的应用程序路由中保留通配符路由时，people/invite 路由永远不会到达。
当我去掉通配符路由后，people/invite可以到达。

那么如何添加“找不到页面”的场景呢？

Answer 1

我可能找到了解决方案，但我怀疑这是最好的解决方案...

当我在急切加载的功能模块中添加重定向到根路由的通配符路由时，似乎一切正常...

const routes: Routes = [
  { 
    path:"people", 
    children: [
      { path: "invite", component: InviteComponent}
    ]
  },
  { path:"**", redirectTo: '/', pathMatch:"full"}
];

这个解决方案的问题是我需要在每个模块中添加一个通配符路由...似乎不是最好的解决方案...

Answer 2

我找到了一个比我以前的解决方案好得多的解决方案...

在app.module中，确保将路由模块放在预先加载的模块后面！

 imports: [
    BrowserModule,
    SharedModule,
    PeopleModule, /* Eagerly loaded module with routing*/
    UsersModule,
    BrowserAnimationsModule,
    AppRoutingModule /* Make sure the app routing module is imported after the eagerly loaded module!! */
 ]

angular ：加载通配符路由而不是急切加载模块中的路由

angular : wildcard route loaded instead of route in eagerly loaded modules

angular

angular-router