Angular 2, RC5 router-outlet inside another router-outlet
Although Modules are recommended they are optional for any route navigation.
You may configure routing like below without any modules.
app.routing
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent,
AdminComponent,
ProfileComponent,
UsersComponent
} from './app.component';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/dashboard/admin/users',
pathMatch: 'full'
},
{
path: 'dashboard',
component: DashboardComponent,
children:[
{
path : 'admin',
component: AdminComponent,
children:[
{
path : 'users',
component: UsersComponent
},
{
path : 'profile',
component: ProfileComponent
}
]
}
]
}
];
export const routing = RouterModule.forRoot(appRoutes);
components
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h3 class="title">Routing Deep dive</h3>
<hr />
<router-outlet></router-outlet>
`
})
export class AppComponent {
}
@Component({
template: `
<h3 class="title">Dashboard</h3>
<nav>
</nav>
<hr />
<router-outlet></router-outlet>
`
})
export class DashboardComponent {
}
@Component({
template: `
<h3 class="title">Admin</h3>
<nav>
<a routerLink="users" routerLinkActive="active" >Users</a>
<a routerLink="profile" routerLinkActive="active" >Profile</a>
</nav>
<hr />
<router-outlet></router-outlet>
`
})
export class AdminComponent {
}
@Component({
template: `
<h3 class="title">Profile</h3>
`
})
export class ProfileComponent {
}
@Component({
template: `
<h3 class="title">Users</h3>
<hr />
`
})
export class UsersComponent {
}
Here is the Plunker!!
Adding a solution with lazy loaded modules. This is a generic answer according to title and not to the body of the original question.
I created a separate module named UserCheckinModule
for non-logged user containing Login
and Signup
pages/components as they usually share common design and functions/services.
Routes defined in app.routing.module.ts -
const routes: Routes = [
{ path: 'user', loadChildren: './user-checkin/user-checkin.module#UserCheckinModule' },
{ path: '**', redirectTo: 'user' }
];
Routes defined in user-checkin-routing.module.ts for UserCheckin
module -
const routes: Routes = [
{
path: '',
component: CheckinComponent, // base template component
children: [
{ path: '', redirectTo: 'login' },
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignupComponent },
{ path: '**', redirectTo: 'login' }
]
}
];
Use forChild()
in imports of user-checkin-routing.module.ts as
RouterModule.forChild(routes)
After this you will have to export your UserCheckinRoutingModule
in UsercheckinModule
.
The app.component.html
already contains a router-outlet
and behaves as the base template/layout for the whole app. The UserCheckinModule
is a child module and has its own routes and base template.
Content of checkin.component.html base template -
<router-outlet></router-outlet>