CODEWITHSUNDEEP
angularangular-ui-router
Billy
Billy

Reputation: 1067

Router not navigating

I am getting the login component to load, but when I press the login button, the url changes to Dashboard but nothing else happens, I see no errors in the console or anything, hence why I cannot diagnose the issue. I'm sure this is simple but with no error, I'm not sure what to do?

Navigate:

public onLogin(value: any) {
  this.router.navigateByUrl('/dashboard')


// this.loginService.onLogin(value)
//   .subscribe(
//     value => {
//       console.log('[POST] login Registrant successfully', value);
//     }, error => {
//       console.log('FAIL to login Registrant!');
//     },
//     () => {
//       console.log('POST Registrants - now completed.');
//     });
  this.submitted = true;
}

Routing Module: 

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
import {LoginComponent} from "./login/login.component";
import {DashboardComponent} from "./dashboard/dashboard.component";


export const appRouter: Routes = [
  {
    path: '**',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  }
];

export const appRoutes: ModuleWithProviders = RouterModule.forRoot(appRouter);

Upvotes: 3

Views: 8148

Answers (2)

Smokey Dawson
Smokey Dawson

Reputation: 9240

First off do not use a wildcard route as your login route..

Basically your wildcard route is if someone gets to a route that doesnt exist show a certain component, if you put that at the top of your route stack.. well the route will always route to the wildcard no matter what

your routing component should look like this..

export const appRouter: Routes = [
  {
    path: '',
    component: LoginComponent
    pathMatch: full
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  },

];

the wildcard route ** being for a page not found component and always make sure its at the end

then in your login component use this instead

this.router.navigate(['dashboard']);

Upvotes: 3

Nuru Salihu
Nuru Salihu

Reputation: 4948

Your app.module said.

export const appRouter: Routes = [
  {
    path: '**',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  }
];

path: '**' will match everylink. SO regardless of the route, LoginComponent will be return. Try changing the order . like 

export const appRouter: Routes = [
      {
        path: 'dashboard',
        component: DashboardComponent
      },
      {
        path: '**',
        component: LoginComponent
      }
    ];

Put the path: '**' at the end always. It means if all path failed, match this.

Upvotes: 1

Related Questions