title: Angular 4 routing params captured as undefined
body: <p>I'm new at Angular. I'm attempting to edit an item at localhost:4200/edit/:id but I can't capture the :id param to fetch the corresponding number from it (it is supposed to be something like localhost:4200/edit/7, for example). When I output the params.id to console, it always shows "undefined". </p>
  
  <p>My app.module.ts</p>
  
  <pre><code>...
  import { RouterModule} from '@angular/router';
  
  const routes = [
  { path: '', component: NavigateComponent },
  { path: 'field', component: FieldComponent },
  { path: 'book', component: MaterialFullComponent, children: [
    { path: '', redirectTo: '', pathMatch: 'full' },
    { path: ':id_book', component: MaterialFullComponent }
  ] },
  { path: 'edit', component: MaterialEditComponent, children: [
    { path: '', redirectTo: '', pathMatch: 'full' },
    { path: 'new', component: MaterialEditComponent },
    { path: ':id', component: MaterialEditComponent }
  ] },
  { path: '**', redirectTo: '/'}
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      AppLoginComponent,
      NavigateComponent,
      MaterialEditComponent,
      MaterialFullComponent,
      FieldComponent,
      MaterialComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      RouterModule.forRoot(routes)
    ],
    providers: [
      MarcService,
      BookService,
      BookDetailService
    ],
    bootstrap: [AppComponent]
  })
  </code></pre>
  
  <p>My MaterialEditComponent</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { BookService } from '../book.service';
  
  @Component({
    selector: 'app-material-edit',
    templateUrl: './material-edit.component.html',
    styleUrls: ['./material-edit.component.css']
  })
  
  export class MaterialEditComponent implements OnInit {
    activatedRoute: ActivatedRoute;  
    bookService: BookService;
    selectedBook = {  id_book: null, 
                  numero_ejemplares: null, 
                  autor: '', 
                  titulo: '',
                  editorial: '',
                  fecha_publicacion: '',
                  portada: ''
    };
  
    constructor(activatedRoute: ActivatedRoute, bookService: BookService) {
      this.activatedRoute = activatedRoute;
      this.bookService = bookService;
    }
  
    ngOnInit() {
      this.activatedRoute.params.subscribe(
        (params) =&gt; {
          console.log(params.id);
        }
      );
    }
  }
  </code></pre>