Angular2 Redirect route doesn't change browser url

5
votes

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'm 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: '' }
];
4
angularangular2-routing
maybe don't use a redirect route, just use "**", component: HomeComponent (instead of redirect). (NM tried it a couple of ways, yeah I wouldn't do this). - Tim Consolazio
Are you using the latest Angular2 and Router version? I saw a similar issue mentioned recently where updating solved it. - Günter Zöchbauer
i use 3.2.3 version of the router, i dont know how to check if i have the latest version - Vince
Check the CHANGELOG.md in the GitHub repo - Günter Zöchbauer
I'm not sure to understand the version in the CHANGELOG.md of the router: github.com/angular/angular/blob/master/modules/%40angular/… it say 3.0.0 - RC2 but i use 3.2.3 version so something doesn't in the version! - Vince

4 Answers

4
votes

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?

2
votes

For me, this problem was caused by importing the module containing the home component in AppModule.

0
votes

You should try this,

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo:'home'},  
   //<<<-----added redirectTo attribute

  { path: 'home', component: HomeComponent  },                
   //<<<----added this line


  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
  { path: 'users', component: UserComponent, canActivate: [AuthGuard] },

  { path: '**', component: HomeComponent }   //<<<--- updated line
];
-1
votes

Maybe it is too late but I think the problem should be with the base href tag. I used something like the code below in my index.html:

<head>
  <meta charset="utf-8">
  <title>MyCoolApp</title>
  <base href=".">
</head>

Basically using href="." broke the routing. Instead if you use href="/" that will do the trick.

<head>
  <meta charset="utf-8">
  <title>MyCoolApp</title>
  <base href="/">
</head>

So now the routing works and all the non-matching routes will end up on "**" path and since "/" is used as base url to find the *-bundle.js files they will be found. I think that is why when you navigate to "/" everything works again.