title: Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit/2'
body: <p>I have a simple app working with angular4, but I got the following error:</p>
  
  <pre><code> :1440 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit/2'
  Error: Cannot match any routes. URL Segment: 'edit/2'
      at ApplyRedirects.noMatchError (router.js:1719)
      at CatchSubscriber.eval [as selector] (router.js:1684)
      at CatchSubscriber.error (catchError.js:105)
      at MapSubscriber.Subscriber._error (Subscriber.js:131)
  </code></pre>
  
  <p>This is the structure of the project  : </p>
  
  <pre><code>--src
      --app
          --views
              --admin
                  --GestionProjects
                       --projects
                             --edit-projects
                                   --edit-project.component.ts
                                   --edit-project.component.html
                             --projects.component.ts
                             --projects.component.html
                       --new-project
                             --new-project.component.ts
                             --new-project.component.html
                       --project.module.ts
                       --project-routing.module.ts
  </code></pre>
  
  <p>this is the file app.routing.ts</p>
  
  <pre><code> import { NgModule } from '@angular/core';
      import { Routes, RouterModule } from '@angular/router';
  
  // Import Containers
  import {
    FullLayoutComponent,
    SimpleLayoutComponent
  } from './containers';
  
  export const routes: Routes = [
    {
      path: '',
      redirectTo: 'pages',
      pathMatch: 'full',
    },
    {
      path: '',
      component: FullLayoutComponent,
      data: {
        title: 'Home'
      },
      children: [
  
        {
          path: 'GestionProject',
          loadChildren: './views/Admin/GestionProjects/projet.module#ProjetModule'
        } 
  
      ]
    },
    {
      path: 'pages',
      component: SimpleLayoutComponent,
      data: {
        title: 'Pages'
      },
      children: [
        {
          path: '',
          loadChildren: './views/pages/pages.module#PagesModule',
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>the file project-routing.module.ts :</p>
  
  <pre><code>    import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import {ProjectsComponent} from './projects/projects.component';
  import {NewProjectsComponent} from './new-projects/new-projects.component';
  import {EditProjectComponent} from './projects/edit-project/edit-project.component';
  
  
  const routes: Routes = [
    {
      path: '',
      data: {
        title: 'Projects'
      },
      children: [
        {
          path: 'list',
          component: ProjectsComponent,
          data: {
            title: 'List of projects'
          },
          children: [
            {
              path: 'edit/:id',
              component : EditProjectComponent,
              data : {
                title: 'editer a project'
              }
            }
          ]
        },
        {
          path: 'add',
          component : NewProjectsComponent,
          data: {
            title: 'add a new project'
          }
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  
  export class ProjetRoutingModule {}
  </code></pre>
  
  <p>the file project.component.ts</p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
  import {Router} from '@angular/router';
  import {ProjetService} from '../../../../../service/projet.service';
  import {Projet} from '../../Models/Projet';
  import 'rxjs/add/operator/map';
  
  @Component({
    selector: 'app-projects',
    templateUrl: './projects.component.html',
    styleUrls: ['./projects.component.scss']
  })
  export class ProjectsComponent implements OnInit {
  
    pageProjects:any;
    pages:Array&lt;number&gt;;
  
    constructor(private router:Router,
                private projetSevice:ProjetService ) { }
  
    ngOnInit() {
  
          this.projetSevice.getProjects()
            .subscribe(data=&gt;{
              this.pageProjects=data;
            },err=&gt;{
              console.log('this is error');
            })
    }
  
    Edit(id:number){
      this.router.navigate(['edit',id]);
    }
  
    delete(p:Projet){
        let confirm = window.confirm('are you sur .. ');
        if(confirm==true){
          this.projetSevice.deleteProject(p.id)
            .subscribe(data=&gt;{
              this.pageProjects.splice(
                this.pageProjects.indexOf(p),1
              );
            },err=&gt;{
              console.log(err);
            })
        }
    }
  
  }
  </code></pre>
  
  <p>and finnaly the file project.component.html </p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
          &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Numéro&lt;/th&gt;
            &lt;th&gt;Intitulé&lt;/th&gt;
            &lt;th&gt;Description&lt;/th&gt;
            &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
  
          &lt;tr *ngFor="let c of pageProjects"&gt;
            &lt;td&gt;{{c.id}}&lt;/td&gt;
            &lt;td&gt;{{c.intitule}}&lt;/td&gt;
            &lt;td&gt;{{c.description}}&lt;/td&gt;
            &lt;td&gt;&lt;a (click)="delete(c)"&gt;delete&lt;/a&gt; &lt;a (click)="Edit(c.id)"&gt;Edit&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;/tbody&gt;
        &lt;/table&gt;
  </code></pre>
  
  <p>i have another file called _nav.ts :</p>
  
  <pre><code> export const navigation = [
    {
      name: 'Tableau de bord',
      url: '/dashboard',
      icon: 'icon-speedometer',
    },
  {
      name: 'Projets',
      url: '/GestionProjects',
      icon: 'icon-puzzle',
      children: [
        {
          name: 'List of projects',
          url: '/list',
          icon: 'icon-puzzle'
        },
        {
          name: 'add a new project',
          url: '/add',
          icon: 'icon-puzzle'
        }
  
      ]
    },
  }
  </code></pre>
  
  <p>that i call in a file that presents the side-nav bar : </p>
  
  <p><a href="https://i.stack.imgur.com/pYiuz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pYiuz.png" alt="enter image description here"></a></p>
  
  <p>everything goes well getting the list of the projects i want but when i click on edit i get the error above rror: Cannot match any routes ... </p>
  
  <p>help please :) </p>