Router not navigating

Question

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

Answer 1

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

Answer 2

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.