Error while routing to a component in angular

Question

This is my folder structure

Folder Structure

login.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { ApicontrolService } from 'src/app/service/apicontrol.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  customerid: number;
  Password: string = "";
  response:string="";
  constructor(private router: Router, private formBuilder: FormBuilder, private apiControl:ApicontrolService) { }

  signin: FormGroup = this.formBuilder.group({
    customerId: new FormControl(null, [Validators.required]),
    password: new FormControl(null, [Validators.required])
  });
  
  ngOnInit(): void {
  }
  async login(){
    this.customerid= this.signin.get("customerId")?.value;
    this.Password= this.signin.get("password")?.value;
    let data={customerId: this.customerid, password:this.Password};
    this.apiControl.letin(data).subscribe(res=>{
      this.response=res;
      console.log("response",res)});

    await new Promise(f => setTimeout(f, 1000));

    if(this.response=='SRIRAM'){
      this.router.navigate(['./viewall'], {data:this.response});

      console.log("yes");
    }
    else{
      console.log("no");
    }

    //this.checkthis();
    }
  }

============================================================================================

viewall.component.ts

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

@Component({
  selector: 'app-viewall',
  templateUrl: './viewall.component.html',
  styleUrls: ['./viewall.component.css']
})
export class ViewallComponent implements OnInit {
  Name: string="";

  constructor(private activatedRoute: ActivatedRoute) {
   }

  ngOnInit(): void {
    this.activatedRoute.queryParams.subscribe(params=>{
      this.Name=params['data'];
      console.log("Response in viewall", this.Name);
    });
  }

}

============================================================================================

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatSlider, MatSliderModule } from '@angular/material/slider';
import { MatButtonModule} from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatRippleModule } from '@angular/material/core';

import { LoginComponent } from './components/login/login.component';
import { ViewallComponent } from './components/viewall/viewall.component';
import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';

const routes : Routes =[
  { path: 'components/viewall', component: ViewallComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ViewallComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    MatFormFieldModule,
    MatSliderModule,
    MatInputModule,
    MatButtonModule,
    MatRippleModule,
    RouterModule.forRoot(routes)
  ],
  providers: [
    HttpClient
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

============================================================================================

Issue

While trying to navigate using a button in login component, this issue arrises in console

ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'viewall' Error: NG04002: Cannot match any routes. URL Segment: 'viewall'
    at ApplyRedirects.noMatchError (router.mjs:3593:16)
    at router.mjs:3575:28
    at catchError.js:10:39
    at OperatorSubscriber._error (OperatorSubscriber.js:23:21)
    at OperatorSubscriber.error (Subscriber.js:40:18)
    at OperatorSubscriber._error (Subscriber.js:64:30)
    at OperatorSubscriber.error (Subscriber.js:40:18)
    at OperatorSubscriber._error (Subscriber.js:64:30)
    at OperatorSubscriber.error (Subscriber.js:40:18)
    at OperatorSubscriber._error (Subscriber.js:64:30)
    at resolvePromise (zone.js:1211:31)
    at resolvePromise (zone.js:1165:17)
    at zone.js:1278:17
    at _ZoneDelegate.invokeTask (zone.js:406:31)
    at Object.onInvokeTask (core.mjs:26365:33)
    at _ZoneDelegate.invokeTask (zone.js:405:60)
    at Zone.runTask (zone.js:178:47)
    at drainMicroTaskQueue (zone.js:585:35)
    at invokeTask (zone.js:491:21)
    at ZoneTask.invoke (zone.js:476:48)

Can someone tell me what I'm missing?

I surfed through multiple solutions before submitting a question here

Answer 1

change this line

this.router.navigate(['./viewall'], {data:this.response});

to

 this.router.navigate(['components', 'viewall'], {
      queryParams: { data: this.response }
    });