在角度路由中混合组件和模块答案

【问题标题】：Mixing components and modules in angular routing在角度路由中混合组件和模块
【发布时间】：2020-06-25 12:40:47
【问题描述】：

我正在开发一个遗留的 Angular 应用程序，并慢慢将其升级到 ng v9。目前，我有这样一个路由配置，它只加载组件但想从现在开始转换到模块。

这就是我当前的路由文件的样子

const routes = [
  {path: 'home', component: HomeComponent, canActivate:[routeGuard]},
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'settings', loadChildren: () => import('path_to_import').then(mod => mod.SettingsModule)}
]

并且从我试图导航的组件中简单地像这样 -

<span routerLink="settings"></span>

奇怪的是，当我点击页面上的设置时，它会将我重定向到“/settings/home”，这不是预期的行为。

但是当我将模块更改为像这样加载的组件时 -

const routes = [
  {path: 'home', component: HomeComponent, canActivate:[routeGuard]},
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'settings', component: SettingsComponent}
]

效果很好。所以我不确定为什么加载模块在这里有所作为。

任何帮助表示赞赏！

【问题讨论】：

您是否为“SettingsModule”定义了第二个路由模块？或其中定义的任何路线？
不，我们没有
如果远程“redirectTo”路径会发生什么？或者尝试将 settings-path 放在首位。
案例 1. 没有重定向 - 正如预期的那样，当我们点击根路径时，它的空白并且什么也没有发生，当我导航到 /settings 时，设置也没有加载，但是导航发生并且 /home 是未附加案例 2。当我将设置移至主页上方时，没有效果 - 仍然相同。 /settings 将附加 /home 导致 /settings/home

标签： angular angular-routing angular-routerlink

【解决方案1】：

您还需要为您的设置模块提供路由。这将决定项目的进一步路线。

而不是像你提到的那样加载模块，尝试添加以下行来加载模块settings。

const routes = [
{path: 'home', component: HomeComponent, canActivate:[routeGuard]},
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'settings', loadChildren: './settings/settings.module#SettingsModule'}
]

我不知道你的设置模块的路径。请根据您的路径更正。并且还定义了设置模块的路由文件。

【讨论】：