CODEWITHSUNDEEP
angularangular2-routing
Vince
Vince

Reputation: 1416

Angular2 Redirect route doesn't change browser url

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: '' }
];

Upvotes: 4

Views: 9534

Answers (4)

Chris Haines
Chris Haines

Reputation: 6555

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

Upvotes: 2

Siavash Outadi
Siavash Outadi

Reputation: 32

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.

Upvotes: -1

Vince
Vince

Reputation: 1416

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?

Upvotes: 4

micronyks
micronyks

Reputation: 55443

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
];

Upvotes: 0

Related Questions