Router not navigating

Issue

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);

Solution

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']);

Answered By – Smokey Dawson

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.