Angular lazy loaded module navgation to child problem

Question

I'm creating a admin and user app in Angular 6 and so far I have two lazy loaded modules UserModule and AdminModule. My app main routing looks like

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 { }

My user modules contains only user.module and user-routing.module inside the module there are multi-component it looks like

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 { }

One of them is the main page with <app-login></app-login> with main navbar with URL when I try to navigate to nay URL I got error:

Uncaught Error: Syntax error, unrecognized expression: /user/login

My menu is

<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>

Where is the error in navigate to children pages?

Yes and opened inside the page but I wanna it to open as a new page — mr.alaa

Radik Radik · Accepted Answer · 2020-04-23T22:35:41

You need review routing structure because each route level needs it own router-outlet

Here working example link

And in module routing HomeRoutingModule you need delete empty sublevel

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

    ]
  }
];

Angular lazy loaded module navgation to child problem

2 Answers