角度延迟加载的模块导航到子问题

Question

我正在Angular 6中创建一个管理员和用户应用程序，到目前为止，我有两个延迟加载的模块UserModule和AdminModule。我的应用程序主路由看起来像

const routes: Routes =
[
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'user',    loadChildren: './user/user.module#UserModule'},
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule'  },
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: '**', redirectTo: 'page-not-found'},
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我的用户模块仅包含user.module和user-routing.module，在模块内部，它看起来像是多组件

const routes: Routes = [
  {
    path: '',
    component: IndexComponent,
    children: [
      {path: '', component: IndexComponent },
      {path: 'login', component: LoginComponent },
      {path: 'Register', component: RegistrationComponent },

    ]
  }
];

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

其中之一是带有<app-login></app-login>的主页，其中带有主导航栏的URL当我尝试导航到出现错误的URL时出现错误：

未捕获的错误：语法错误，无法识别的表达式：/ user / login

我的菜单是

<ul class="navbar-nav ml-auto">
    <li class="nav-item">
        <a class="nav-link page-scroll" routerLink="Register" routerLinkActive='active'>Register</a>
    </li>
    <li class="nav-item">
        <a class="nav-link page-scroll" routerLink='login' routerLinkActive='active'>login</a>
    </li>
</ul>

导航到子页面时哪里出错？

Answer 1

您需要查看路由结构，因为每个路由级别都需要它自己的路由器出口

这里是工作示例link

并且在路由HomeRoutingModule的模块中，您需要删除空的子级别

const routes: Routes = [
  {
    path: '',
    component: IndexComponent,
    children: [
      // {path: '', component: IndexComponent },
      {path: 'login', component: LoginComponent },
      {path: 'Register', component: RegistrationComponent },

    ]
  }
];

Answer 2

我更改了我的应用程序结构，现在所有人都可以正常使用它