0
343
ViewsAngular 2 routing redirect to with child routes
I am a newbie in Angular 2. I want to create isolated modules for every part of my app. For example I created the AuthModule with default component - AuthComponent which contain a router-outlet for his child components (SignIn or SignUp). So I want to realise the following scenario:
- When navigate to / - root off app - redirect to /auth
- After redirect to /auth - load AuthComponent with router outlet
- After AppComponent loaded - load default sign-in component via redirecting to /auth/sign-in
But when I going to localhost/ I get redirect to /auth what I want, but the next redirect to sign-in doesn't appear.
My code:
app.routing
const routes: Routes = [
{
path: '',
redirectTo: '/auth',
pathMatch: 'full'
}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routing
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{
path: '',
redirectTo: 'sign-in',
pathMatch: 'full'
},
{
path: 'sign-in',
component: SignInComponent
}
]
},
];
export const authRouting: ModuleWithProviders = RouterModule.forChild(routes);
auth.component.html
<div class="container">
<h1>Auth component</h1>
<router-outlet></router-outlet>
</div>
Result:
Environment @angular/cli: 1.0.0-rc.2 node: 7.7.1 os: win32 x64
3 answers
Answer question0
I have been the same problem. It seems an Angular tricks: If you remove leading slash in 'redirectTo' field, your application will be redirected successfully to auth/sign-in.
Use this in app.routing:
const routes: Routes = [
{path: '', redirectTo: 'auth', pathMatch: 'full'},
];
‘redirectTo’ value starts with a ‘/’ = absolute path
‘redirectTo’ value starts without a ‘/’ = relative path
Read more about it: https://vsavkin.com/angular-router-understanding-redirects-2826177761fc
P.S My opinion that your structure more correctly then YounesM's one. Parent module can't keep children routes: "app" module don't know that "auth" module have children module "sign-in".
0
On auth.routes
const routes: Routes = [
{
path: "auth",
redirectTo: "auth/sign-in"
},
{
path: "auth",
component: AuthComponent,
children: [{ path: "sign-in", component: SignInComponent }]
}
];
0
So, what it seems to happen is that when you redirectTo:'auth' it tries to load the '' children's component and since it does not have any component the router-outlet is empty.
Now it seems like {path: '', redirectTo: 'sign-in', pathMatch: 'full'} doesn't have any other purpose then redirecting to sign-in so you can simply redirect to /auth/sign-in instead.
app.routes
const routes: Routes = [
{path: '', redirectTo: '/auth/sign-in', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routes
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{path: 'sign-in', component: SignInComponent}
]
},
];
or have a component in your '' path instead of redirecting.
app.routes
const routes: Routes = [
{path: '', redirectTo: '/auth', pathMatch: 'full'}
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(routes);
auth.routes
const routes: Routes = [
{
path: 'auth',
component: AuthComponent,
children: [
{path: '', component: SignInComponent}
]
},
];