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?
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 },
]
}
];
I have changed my app structure and now works perfectly thanks to all
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.