title: Angular router - wrong url on redirection
body: <p>I have problem with the Angular routing. I am trying to do redirection from one page to another with parameter and as a result my browser tries to redirect to this link: 
  '<a href="http://localhost:4200/resumes/%5Bobject%20Object%5D/edit" rel="nofollow noreferrer">http://localhost:4200/resumes/%5Bobject%20Object%5D/edit</a>' 
  instead of this '<a href="http://localhost:4200/resumes/21/edit" rel="nofollow noreferrer">http://localhost:4200/resumes/21/edit</a>'.</p>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>{ path: 'resumes/:id/edit', component: EditResumeComponent } 
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Resume } from 'src/app/models/Resume';
  import { ResumeService } from 'src/app/services/resume.service';
  import { Router } from '@angular/router';
  import { UserService } from 'src/app/services/user.service';
  import { AddUser } from 'src/app/models/AddUser';
  
  @Component({
    selector: 'app-supply-contact-information',
    templateUrl: './supply-contact-information.component.html',
    styleUrls: ['./supply-contact-information.component.css']
  })
  export class SupplyContactInformationComponent implements OnInit {
    id: string;
    resume: Resume;
  
    constructor(
      private resumeService: ResumeService,
      private router: Router,
      private userService: UserService) { }
  
    ngOnInit() {
      this.resume = this.resumeService.getResume();
    }
  
    onSubmit() {
      this.resumeService.updateResume(this.resume);
      const addUserRequest = new AddUser(this.resume.firstName, this.resume.lastName, this.resume.email, this.resume.phone);
  
      this.userService.addUser(addUserRequest)
        .subscribe(value =&gt; this.id = value.toString(),
          () =&gt; {
            // TODO: On error should be implemented here!
          },
          () =&gt; {
            this.router.navigate([`/resumes/${this.id}/edit`]);
          });
    }
  }
  </code></pre>
  
  <p><strong>user.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Observable, of } from 'rxjs';
  import { AddUser } from '../models/AddUser';
  import { environment } from '../../environments/environment';
  import { catchError, tap } from 'rxjs/operators';
  
  const httpOptions = {
    headers: new HttpHeaders(
      {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json'
      }),
  };
  
  @Injectable({
    providedIn: 'root'
  })
  export class UserService {
    private apiUrl = environment.apiUrl;
  
    constructor(private http: HttpClient) { }
  
    addUser(addUserQuery: AddUser): Observable&lt;number&gt; {
      return this.http.post&lt;number&gt;(`${this.apiUrl}/user`, addUserQuery, httpOptions)
        .pipe(
          tap(() =&gt; this.log(`User with email: ${addUserQuery.email} created!`, false)),
          catchError(this.handleError&lt;any&gt;('addUser'))
        );
    }
  
    private handleError&lt;T&gt;(operation = 'operation', result?: T) {
      return (error: any): Observable&lt;T&gt; =&gt; {
        console.error(`${operation}: ${error}`);
        return of(result as T);
      };
    }
  
    // TODO: It should be implemented better later!
    private log(message: string, showNotification: boolean) {
      if (showNotification) {
        console.log(message);
      }
    }
  }
  </code></pre>
  
  <p>I tried to redirect like this, but getting same result:</p>
  
  <pre><code>this.router.navigate(['resumes', id, 'edit']);
  </code></pre>
  
  <p><code>id</code> is a normal string property, not an object. The <code>AddUser</code> method returns number so I used the <code>.toString()</code> method to make it a string.</p>