title: Angular - routing rewrite url
body: <p>I have a problem that seems simple, but I've searched a lot for the solution but couldn't find it, especially since lots of things changed since Angular2.</p>
  
  <p>I have few special pages</p>
  
  <pre><code>/page/1
  </code></pre>
  
  <p>represents page about water</p>
  
  <pre><code>/page/2
  </code></pre>
  
  <p>represents page about fire.</p>
  
  <p>Other pages are "normal" like</p>
  
  <pre><code>/contact
  /about
  </code></pre>
  
  <p>...</p>
  
  <p>In RouterModule I have:</p>
  
  <pre><code>RouterModule.forRoot([      
    {
        path: 'page/:id',
        component: PageComponent     
    },
    {
        path: 'contact',
        component: ContactComponent     
    },
  </code></pre>
  
  <p>So Water and Fire content are generated in PageComponent depending on id 1 or 2, respectively. (I have other dynamic data, not just water and fire)</p>
  
  <p>Now I want when user enters</p>
  
  <pre><code>/water
  </code></pre>
  
  <p>to see the content of (without changing URL!) to</p>
  
  <pre><code>/page/1
  </code></pre>
  
  <p>So I have a redirection, in lack of better solution:</p>
  
  <pre><code>{ path: 'water', redirectTo: 'page/1', pathMatch: 'full' },
  { path: 'fire', redirectTo: 'page/2', pathMatch: 'full' } ...
  </code></pre>
  
  <p>But that results in changing URL. But what I want is when user enters</p>
  
  <pre><code>/water
  </code></pre>
  
  <p>I want the URL to remain that, not the redirection! (Same goes for /fire and other dynamic content pages.)</p>