title: How to redirect the route with some id to human friendly url and handle canonical url in angular routes?
body: <p>I have two url format</p>
  
  <p><code>example.com/posts/:postId</code> and <code>example.com/posts/:postId/:postTitle</code> just like stack-overflow individual question url. </p>
  
  <p>In angular route I need to redirect all the urls with <code>:postId</code> to <code>:postId/:PostTitle</code> or directly loading the page with <code>:postId/:PostTitle</code> lands to same page.</p>
  
  <p><strong>post.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [
      {
          path: ':postId',
          resolve: {data: PdResolver}, 
          redirectTo: ':postId/:PostTitle', 
          pathMatch: 'full'
      },
      {
          path: ':postId/:PostTitle',
          component: PostComponent,
          data: {
              title: 'This has to be the post fetched title'
          }
      }
  ];
  </code></pre>
  
  <ul>
  <li><code>redirectTo: ':postId/:PostTitle'</code>: here I don't have a postTitle so it throws error</li>
  <li>How can I append the postTitle to the url and also avoid duplicate
  url issue. </li>
  <li>What are some best practices to follow this pattern.</li>
  </ul>
  
  <blockquote>
    <p>I don't have the title so first I need to get postTitle using the
    postId, so we have a post data resolver (PdResolver),</p>
  </blockquote>
  
  <p><strong>Question Update: For a workaround:</strong></p>
  
  <p>I tried with child component which at least solves the case but still wondering if this is the approach I should follow or not.</p>
  
  <pre><code>    {
          path: ':postId',
          component: PostOutletComponent,
          resolve: {data: PdResolver},
          children: [
              {
                  path: ':postTitle',
                  component: PostComponent,
              }]
  
      }
  </code></pre>
  
  <p>And in <code>PostOutletComponent</code> I am navigating further to child component after fetching the title</p>
  
  <p><strong>PostOutletComponent.ts</strong></p>
  
  <pre><code>static stripHtml(html: string) {
          let div = document.createElement('DIV');
          div.innerHTML = html;
          const cleanText = div.innerText;
          div = null;
          return cleanText;
      }
  
   ngOnInit() {
          this.reolveData = this._route.snapshot.data;
          let postTitle = PostOutletComponent.stripHtml(
              this.reolveData.data.data.post_title);
          postTitle = postTitle.replace(/\s+/g, '-').toLowerCase();
          this.router.navigate([postTitle], {relativeTo: this._route});
      }
  </code></pre>