title: Clearing router fragment in Angular 6
body: <p>I have an angular app, using Angular 6 and NgRX 6.</p>
  
  <p>I have an identity server I am talking to via the implicit flow, that once redirects back to my app, has my token response and so on still in the navigation bar. </p>
  
  <p>I would like to clear that fragment from the url and remain on my route.</p>
  
  <p>For example</p>
  
  <pre><code>http://foo.com/bar/boo#key=value
  </code></pre>
  
  <p>I would like to clear this once I am finished and be left on</p>
  
  <pre><code>http://foo.com/bar/boo
  </code></pre>
  
  <p>I am handling this in an effect, as follows</p>
  
  <pre><code> @Effect({ dispatch: false })
    persistSessionTokens$: Observable&lt;void&gt; = this.actions$.pipe(
      ofType&lt;ActionWithPayload&gt;(SET_SESSION_TOKENS),
      map(action =&gt; action.payload),
      tap(tokens =&gt; {
        persist(ID_TOKEN_STORAGE_KEY, tokens[ID_TOKEN_STORAGE_KEY]);
        persist(ACCESS_TOKEN_STORAGE_KEY, tokens[ACCESS_TOKEN_STORAGE_KEY]);
  
        const url = this.router.url;
  
        this.router.navigate([url], { replaceUrl: true });
      }),
      catchError(error =&gt; of({ type: SET_TOKEN_FAILURE, payload: error }))
    );
  </code></pre>
  
  <p>However this redirects me to
  <code>http://foo.com/bar/</code></p>
  
  <p>My application in this case has a base href of <code>bar</code></p>
  
  <p><code>boo</code> is the name of my tenant, so it is important I retain this structure in the url.</p>