4

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: '' }
];
Improve this question
5
  • 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
    Commented Dec 31, 2016 at 15:28
  • Are you using the latest Angular2 and Router version? I saw a similar issue mentioned recently where updating solved it.
    – Günter Zöchbauer
    Commented Dec 31, 2016 at 17:23
  • i use 3.2.3 version of the router, i dont know how to check if i have the latest version
    – Vince
    Commented Dec 31, 2016 at 17:30
  • Check the CHANGELOG.md in the GitHub repo
    – Günter Zöchbauer
    Commented Dec 31, 2016 at 18:02
  • 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
    Commented Dec 31, 2016 at 19:25

4 Answers 4

Reset to default
4

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?

Improve this answer
2

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

Improve this answer
2
  • You know it's 2 year old ? It was a bug inside their code because it's not a problem anymore... And in that time i was using a single module for the application so your expectation is wrong.
    – Vince
    Commented Nov 8, 2018 at 20:56
  • 3
    @Vince other people are referencing these answers too
    – MDave
    Commented Apr 25, 2019 at 1:08
0

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
];
Improve this answer
13
  • it doesn't work, it keep the nopath in the url and i doesn't get redirected to HomeComponent
    – Vince
    Commented Dec 31, 2016 at 15:43
  • I tried the redirectTo: 'home' too and it keep the bad url in the browser, i need to enter push enter a second time so it change the url bu reloading the app completly...
    – Vince
    Commented Dec 31, 2016 at 15:54
  • ** i need to push enter a second time in the browser url to make the app reload and that work.. but it's a strange behaviour i want that my user that write a bad url be redirected to my home component with the home url without the need to reload the app
    – Vince
    Commented Dec 31, 2016 at 15:57
  • 1
    @Vince I'm sure its not a bug. We all have been using ** path.
    – micronyks
    Commented Dec 31, 2016 at 16:44
  • 1
    @Vince problem is with redirectTo:'' because of patchMatch:full some problem is happening. You can redirect it using component directly. Updating answer.
    – micronyks
    Commented Dec 31, 2016 at 16:51
-1

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.

Improve this answer
2
  • This isn't an answer to the original question/problem.
    – Chris Haines
    Commented Nov 8, 2018 at 8:54
  • The cause of the problem could be that the routing uses the relative path instead of absolute one and ' ' relatively to nopath would be nopath. At least it was in my case.
    – Siavash Outadi
    Commented Nov 11, 2018 at 15:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.