How to redirect unknown routes to home route in Angular program?

Question

I have a routes.ts file like below:

import { AuthGuardService as AuthGuard } from '../services/auth-guard.service';

export const routes:Routes = [
    {path : '' , redirectTo : '/home' , pathMatch : 'full'},
    {path: 'home' , component : HomeComponent},
    {path: 'users' , component : UsersComponent, canActivate: [AuthGuard]},

];

And an auth-guard.service.ts file like this:

export class AuthGuardService implements CanActivate {

  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isLoggedIn()) {
      this.router.navigate(['home']);
      return false;
    }
    return true;
  }
}

And it works well for known routes like users but when I try an unknown route like homeee it doesn't work properly and shows a page with header and footer and no content among. How can I redirect all unknown routes to home component?

Also I like to know is this a good way for what I like to do or not? (I like only logged-in users have access to see other components than home component and also all routes before logging-in be redirected to home component).

OSH · Accepted Answer · 2020-08-13T18:24:58.893

18

The Angular documentation recommends defining a wildcard route.

Add a wildcard route to intercept invalid URLs and handle them gracefully. A wildcard route has a path consisting of two asterisks. It matches every URL. The router will select this route if it can't match a route earlier in the configuration. A wildcard route can navigate to a custom "404 Not Found" component or redirect to an existing

The router selects the route with a first match wins strategy. Wildcard routes are the least specific routes in the route configuration. Be sure it is the last route in the configuration.

In your case:

{ path: '**', redirectTo: 'home'}

edited Aug 13 '20 at 18:24

answered Apr 07 '20 at 16:18

OSH

741
4
11

Thanks! But one question, when I try predefined routes like `/users` it will redirect to `/home` and the URL in browser will change automatically, but when I try an unknown route like `home1` it again redirects to home route but the URL remains at unknown route. How can I fix it? – Hasani Apr 07 '20 at 16:36
Surely `{ path: '**', redirectTo: '/home' }` would be preferable? Otherwise the `HomeComponent` would be visible for http://localhost:4200/blah. And if `HomeComponent` had parameters, they wouldn't be picked up by the wildcard route. – Kurt Hamilton Apr 07 '20 at 16:39
@KurtHamilton You're right. Thanks for pointing that out. I'll update my answer. – OSH Apr 07 '20 at 17:21
@user3486308 Does any kind of error appear in the browser console? – OSH Apr 07 '20 at 17:48

score 4 · Answer 2 · answered Apr 07 '20 at 16:19

4

Enhance your existing array of routes by adding a fallback route :

export const routes:Routes = [
    {path : '' , redirectTo : '/home' , pathMatch : 'full'},
    {path: 'home' , component : HomeComponent},
    {path: 'users' , component : UsersComponent, canActivate: [AuthGuard]},
    {path: '**' , component : HomeComponent},

];

Be careful to include it at the end of the array or it'll catch all routes.

answered Apr 07 '20 at 16:19

Gérôme Grignon

3,859
1
6
18

1

Thanks! But one question, when I try predefined routes like `/users` it will redirect to `/home` and the URL in browser will change automatically, but when I try an unknown route like `home1` it again redirects to home route but the URL remains at unknown route. How can I fix it? – Hasani Apr 07 '20 at 16:36

How to redirect unknown routes to home route in Angular program?

2 Answers2