Jhipster：导航不再起作用

Question

我已经成功生成了一个单一的 jhipster 4.13 应用程序并将其修改为使用登录页面启动。

这是我的 app.route.ts 的内容：

export const APP_ROUTE: Routes = [
    {
      path: '',
      component: HomeLayoutComponent,
      data: {
        authorities: ['ROLE_USER'],
        pageTitle: 'home.title'
      },
      canActivate: [ UserRouteAccessService ],
      children: [
        { path: '', component: NavbarComponent, outlet: 'navbar' },
        { path: 'home', component: HomeComponent },
      ]
    },
    {
      path: '',
      component: LoginLayoutComponent,
      children: [
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'reset', component: RegisterComponent },
      ]
    },
    { path: '**', redirectTo: 'home', pathMatch: 'full' },
];

app-routing.module.ts文件内容：

const LAYOUT_ROUTES = APP_ROUTE;
[
    APP_ROUTE,
    navbarRoute,
    ...errorRoute
];

@NgModule({
    imports: [
        RouterModule.forRoot(LAYOUT_ROUTES, { useHash: true })
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule {}

以下是新的布局模板： jhi-main：

<router-outlet></router-outlet>

jhi-登录布局：

<jhi-page-ribbon></jhi-page-ribbon>
<router-outlet></router-outlet>
<jhi-footer></jhi-footer>

jhi-home-布局：

<jhi-page-ribbon></jhi-page-ribbon>
<div>    
    <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
    <div class="card jh-card">
        <router-outlet></router-outlet>
        <router-outlet name="popup"></router-outlet>
    </div>
    <jhi-footer></jhi-footer>
</div>

在这些修改之后，我的应用程序按预期在登录页面上启动，经过身份验证后，我可以使用导航栏访问我的主页。我也可以注销 成功，但我无法再启动这些页面，例如：

"jhi-metrics", "jhi-health"; "jhi-configuration"; "audits" or "logs".

有什么想法吗？

在考虑@sue 的建议后添加 { enableTracing: true }

Router Event: NavigationStart
NavigationStart(id: 7, url: '/home/(jhi-metrics)')
Router Event: RoutesRecognized

RoutesRecognized(id: 7, url: '/home/(jhi-metrics)', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'home', path:'home'), Route(url:'', path:'') }  } )
Router Event: GuardsCheckStart
GuardsCheckStart(id: 7, url: '/home/(jhi-metrics)', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'home', path:'home'), Route(url:'', path:'') }  } )
Router Event: GuardsCheckEnd
GuardsCheckEnd(id: 7, url: '/home/(jhi-metrics)', urlAfterRedirects: '/home', state: Route(url:'', path:'') { Route(url:'', path:'') { Route(url:'home', path:'home'), Route(url:'', path:'') }  } , shouldActivate: true)
Router Event: ActivationEnd
ActivationEnd(path: 'home')
Router Event: ActivationEnd
ActivationEnd(path: '')
Router Event: ChildActivationEnd
ChildActivationEnd(path: '')
Router Event: ActivationEnd
ActivationEnd(path: '')
Router Event: ChildActivationEnd
ChildActivationEnd(path: '')
Router Event: NavigationEnd
NavigationEnd(id: 7, url: '/home/(jhi-metrics)', urlAfterRedirects: '/home')

Answer 1

https://angular.io/guide/router或许能帮到你。

打开浏览器调试模式，查看路由的路径

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})