角度：加载通配符路由而不是急切加载模块中的路由答案

【问题标题】：angular : wildcard route loaded instead of route in eagerly loaded modules角度：加载通配符路由而不是急切加载模块中的路由
【发布时间】：2020-08-06 23:03:20
【问题描述】：

我有一个包含 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。

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

【问题讨论】：

标签： angular angular-router

【解决方案1】：

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

在 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!! */
 ]

【讨论】：

在我的情况下，路由模块（在我的情况下为 AppRoutingModule）被放在急切加载的模块（在我的情况下为 AuthModule）的后面/之后，但它仍然无法正常工作。但是，我将 AuthModule 放在导入的第一个位置，将 Routing Module 放在最后，它起作用了。

【解决方案2】：

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

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

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

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

【讨论】：