Trying to create my redirect route in my angular2 app.
But my problem is that when someone enter an invalid path like 'nopath' then user is redirected to the 'HomeComponent' but the url still keep the '/#/nopath'
I want the redirectTo route to change the url too! How should I achieve this?
Should I put an if in my HomeComponent constructor that check the current url and change his route to homecomponent? Or there is something I am missing?
Routes:
const routes: Routes = [
{ path: '', pathMatch: 'full', component: HomeComponent },
{ path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
{ path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
{ path: 'users', component: UserComponent, canActivate: [AuthGuard] },
{ path: '**', redirectTo: '' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});
EDIT:
Tried this, but i doesn't get the redirect to the home component
const routes: Routes = [
{ path: '', pathMatch: 'full' , redirectTo: 'home' },
{ path: 'home', component: HomeComponent },
{ path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
{ path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
{ path: 'users', component: UserComponent, canActivate: [AuthGuard] },
{ path: '**', redirectTo: '' }
];
For now, i didn't find any better way than hacking the Angular2 Router.
Here is my solution, it's not a beautifull way to fix the problem... but at least it work as i want!
Routes:
const routes: Routes = [
{ path: '', pathMatch: 'full', component: HomeComponent },
{ path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
{ path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
{ path: 'users', component: UserComponent, canActivate: [AuthGuard] },
{ path: '**', component: HomeComponent, canActivate: [RedirectToHomeGuard] }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });
RedirectToHomeGuard:
@Injectable()
export class RedirectToHomeGuard implements CanActivate {
constructor(private router: Router) { }
canActivate() {
this.router.navigate(['/']);
return false;
}
}
You guys think it could be a good solution?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With