Redirect Empty path to a component

Question

As, I was not able to redirect an empty path to a component. I have gone through many questions here but none of the solutions solves it.

When a user hits a URL first time. I wants him to redirect to a component.

The Approach i used:

{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },

but its not redirecting it that specific component. Insted of which it redirects it to some another component.

In details routes configurations are listed:

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  {
    path: 'notifications',
    component: NotificationComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'drivers',
    loadChildren: './drivers/drivers.module#DriversModule',
    canActivate: [AuthGuard]
  }, {
    path: 'managers',
    loadChildren: './users/users.module#UsersModule',
    canActivate: [AuthGuard]
  }, {
    path: 'vendors',
    loadChildren: './vendors/vendors.module#VendorsModule',
    canActivate: [AuthGuard]
  }, {
    path: 'settings',
    loadChildren: './settings/settings.module#SettingsModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'payments',
    loadChildren: './payments/payments.module#PaymentsModule',
    // canActivate: [AuthGuard]
  },
  { path: 'orders/:id', component: OrderDetailsComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: '**', component: LoginComponent }

];

The Angular configurations i used:

  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.6",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "^6.0.0-beta.17",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.6",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@types/socket.io-client": "^1.4.32",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "socket.io-client": "^2.1.1",
    "zone.js": "~0.8.26"
  },

AuthGurad:

export class AuthGuard implements CanActivate, CanActivateChild {
  constructor(private router: Router) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (!localStorage.getItem('token')) {
      this.router.navigate(['/login']);
      return false;
    } else {
      return true;
    }
  }

  canActivateChild(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (!localStorage.getItem('token')) {
      this.router.navigate(['/login']);
      return false;
    } else {
      return true;
    }
  }
}

Any help would be appreciated.

@PrashantPimpale as it is not a demo project. I dont have permissions to do so — Ankit Manchanda, Jul 15 '19 at 07:13
But your `HomeComponent` is guarded by the `AuthGuard`. Can you please check if the control is going to the AuthGuard? If it is, where exactly are you redirecting the user to? — SiddAjmera, Jul 15 '19 at 07:14
@AnkitManchanda, we're not asking you to paste the exact code from the project. We're just asking you to create a minimal sample replicating your issue. There are a few unknowns that we'd need to know in order to figure out what the issue is. — SiddAjmera, Jul 15 '19 at 07:15
Yes, if logged in then to HomeComponent else LoginComponent. But not able to achieve this — Ankit Manchanda, Jul 15 '19 at 07:15
Please share your implementation of the `AuthGuard`. There could be some issue with the logic that you've written there. — SiddAjmera, Jul 15 '19 at 07:16

score 1 · Answer 1 · answered Jul 15 '19 at 07:36

1

Perhaps the problem is with AuthGuard. Redirect must work. Alternatively, you can write to ngOnInit in any Main (root) component navigate method, when let you go to /home component.

answered Jul 15 '19 at 07:36

Dmitry Vasilkov

76
2

Redirect Empty path to a component

1 Answers1