angular routing using router.navigate

Question

I am trying to navigate to another component from my current component like so:

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

The above statement is not routing to a different component, Below is my code in app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PersonalInfoComponent} from './PersonalInfo/PersonalInfo.component';
import {RequiredInfoComponent} from './RequiredInfo/RequiredInfo.component';
import {RelationshipInfoComponent} from './relationshipInfo/relationshipInfo.component'

const routes: Routes = [

  {path: 'PersonalInfo', component: PersonalInfoComponent},
  {
    path: '',
    children: [
      {path: 'RequiredInfo', component: RequiredInfoComponent},
      {path: 'RelationshipInfo', component: RelationshipInfoComponent},

  ]

  },

  {path: '**', redirectTo: 'PersonalInfo', pathMatch: 'full'},

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

below is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PersonalInfoComponent } from './PersonalInfo/PersonalInfo.component';
import { MaterialModule } from './shared/Material.Module';
import { FormsModule } from '@angular/forms';
import { RequiredInfoComponent } from './RequiredInfo/RequiredInfo.component';
import { RelationshipInfoComponent } from './relationshipInfo/relationshipInfo.component';

@NgModule({
   declarations: [
      AppComponent,
      PersonalInfoComponent,
      RequiredInfoComponent,
      RelationshipInfoComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      MaterialModule,
      FormsModule
   ],
   providers: [],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

I am trying to route on the click of my button. the button exists in PersonalInfo page. Below is the HTML and .ts code:

Online

and below is my .ts code:

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

@Component({
  selector: 'app-PersonalInfo',
  templateUrl: './PersonalInfo.component.html',
  styleUrls: ['./PersonalInfo.component.css']
})
export class PersonalInfoComponent implements OnInit {
  public Loaded = false;
  public btnshow=true;
  constructor(private router:Router) { }

  ngOnInit() {
  }

  onlinePage(){
    this.router.navigate(['/RelationshipInfo']);
    this.router.navigateByUrl('/RelationshipInfo');
  }

  Continue()
  {
    //this.router.navigate(['/RequiredInfo']);
    this.router.navigateByUrl('/RequiredInfo');

  }

  Cancel(){}

}

any help will be greatly appreciated.

Answer 1

Angular routes path are case sensitive. You have you route defined as:

{path: 'RelationshipInfo', component: RelationshipInfoComponent},

with capital R so this.router.navigate should also be with capital R

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