title: Angular 4 - Activated Route with param
body: <p>I have a list page and a detail page. Selecting an item from the list page will route to the details page. </p>
  
  <p>routing module:</p>
  
  <pre><code>const itemRoutes: Routes = [
      { path: 'item', component: ItemListComponent},
      { path: 'item/:id', component: ItemDetailComponent  }
  ];
  </code></pre>
  
  <p>list component:</p>
  
  <pre><code>constructor( private route: ActivatedRoute, private router: Router) {}
  
  goToDetail(item) {
      this.router.navigate(['item'], {id: item.id});
  }
  </code></pre>
  
  <p>Problem:
  Selecting an item goes to this url: 
  <a href="http://localhost:3000/item/2" rel="nofollow noreferrer">http://localhost:3000/item/2</a></p>
  
  <p>But the browser shows "Not found" error.</p>
  
  <p>On the console, I see this:</p>
  
  <pre><code>:3000/item/2:1 GET http://localhost:3000/item/2 404 (Not Found)
  Navigated to http://localhost:3000/item/2
  </code></pre>
  
  <p>What am I doing wrong? </p>