ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'list' Error: Cannot match any routes. URL Segment: 'list'

Question

I have a simple app working with angular5, but I got the following error:

    ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'list'
Error: Cannot match any routes. URL Segment: 'list'

I'm trying to edit the information of a client , so before all i get the list of the clients without problem ,i click edit , i get correctly all his information but when i save i should see the list of the clients , instead of that i get the above error.

this is the structure of this component :

File : client--routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ClientsComponent} from './clients/clients.component';
import {EditClientsComponent} from './clients/edit-clients/edit-clients.component';
import {NewClientsComponent} from './new-clients/new-clients.component';

      const routes: Routes = [
        {
          path: '',
          pathMatch: 'full',
          data: {
            title: 'Clients'
          }
        },
        {
          path: 'list',
          pathMatch: 'full',
          component: ClientsComponent,
          data: {
            title: 'Liste des clients'
          }
        },
        {
          path: 'list/edit/:id',
          pathMatch: 'full',
          component : EditClientsComponent,
          data : {
            title: 'editer un client'
          }
        },
        {
          path: 'ajouter',
          pathMatch: 'full',
          component : NewClientsComponent,
          data: {
            title: 'Ajouter un client'
          }
        }
      ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class ClientRoutingModule {}

File EditClientComponent.ts

 import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {Clients} from '../../../Models/Clients';
import {ClientService} from '../../../../../../service/client.service';

@Component({
  selector: 'app-edit-clients',
  templateUrl: './edit-clients.component.html',
  styleUrls: ['./edit-clients.component.scss']
})
export class EditClientsComponent implements OnInit {

  idClient:number;
  client:Clients = new Clients();


  constructor(public activatedRoute:ActivatedRoute ,
              public clientService:ClientService,
              public router:Router) {
    this.idClient = activatedRoute.snapshot.params['id'];

  }

  ngOnInit() {
    this.clientService.getClient(this.idClient)
      .subscribe((data:Clients)=>{
        this.client=data;
      },err=>{
        console.log(err);
      })
  }

  EditClient(){
    this.clientService.updateClient(this.client)
      .subscribe(data=>{
        console.log(data);
        this.router.navigateByUrl('list');
        },err=>{
        console.log(err);
        alert("Probleme");
      })
  }


}

And finnaly the app.routinge.ts

  export const routes: Routes = [
  {
    path: '',
    redirectTo: 'pages',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'GestionClients',
        loadChildren: './views/Admin/GestionClients/client.module#ClientModule'
      }
    ]
     }
     ];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

Solution 1

use relative navigation instead to go from list/edit/:id to list, use ../ to to go up one level in your path

 constructor( private route: ActivatedRoute,private router: Router) { } 

 this.router.navigate([ '../../../list' ], { relativeTo: this.route });

Solution 2

In my case I had a misplaced name of the AppRoutingModule, in the app.module.ts, Visual Studio Code doesn't show me any error, and I didn't get any compiling errors :

import { AppRoutingModule } from './app-routing.module';

Make sure to have the right name, in my case it was like this :

import { AppRoutingModule } from './app.routing.module';

Hope this will help.

Comments

[Lakshmi Prasanna]

What is the url you hit ..?

[mxr7350]

have you tried this.router.navigateByUrl('/list'); ?

[dEs12ZER]

@mxr7350 i tried that but it didn't work always the same error

[dEs12ZER]

@LakshmiPrasanna i want to access the list of clients after the edit of information of client

[dEs12ZER]

that was the correct answer , thank you @Fateh Mohammed again for your help , can you please explain to me what's the use of relativeTo ?

[Fateh Mohamed]

well as the name explain, we use it to navigate relative to the current route, if we are on /test1 and we navigate to test2 with relativeTo that will redirect to /test1/test2, i invite you to read this bro concretepage.com/angular-2/…