Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment in Angular 6

0
votes

I'm working on angular 6 app, i have login page & i want to redirect from login to dashboard page. I have added routing in app.component.ts. But it shows an error "Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashbaord' ". Pls let me know where i missed in it.
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LogingComponent } from './loging/loging.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { DashboardComponent } from './dashboard/dashboard.component';
@NgModule({
  declarations: [
    AppComponent,
    LogingComponent,
    SidebarComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


login.component.ts

import { DashboardComponent } from './../dashboard/dashboard.component';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-loging',
  templateUrl: './loging.component.html',
  styleUrls: ['./loging.component.css']
})
export class LogingComponent implements OnInit {
  constructor(private router: Router) { }
  public onLoginClick() {
    console.log('Hi');
    this.router.navigate(['./dashbaord']);
}
  ngOnInit() {
  }
}


app.routing.module.ts

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LogingComponent } from './loging/loging.component';
const routes: Routes = [
  { path: '', component: LogingComponent},
  { path: 'dashboard', component: DashboardComponent}
 ];    
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }


dashboard.component.ts

 import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
1
typescriptangular6

1 Answers

0
votes

A typo in your login ruins your party.

Instead of 

this.router.navigate(['./dashbaord']);

Do...

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