title: How to redirect unknown routes to home route in Angular program?
body: <p>I have a <code>routes.ts</code> file like below:</p>
  
  <pre><code>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]},
  
  ];
  </code></pre>
  
  <p>And an <code>auth-guard.service.ts</code> file like this:</p>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <p>And it works well for known routes like <code>users</code> but when I try an unknown route like <code>homeee</code> 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?</p>
  
  <p>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).</p>