title: Angular routing: how to redirect to another path on resolve success?
body: <p>I have an Angular app in which users can access using a direct link, containing a token, such as the following:</p>
  
  <p><code>localhost:3000/token/&lt;alphanumeric string&gt;</code></p>
  
  <p>The related component does a check for the token validity and if success then loads the page content.</p>
  
  <p>After the users access the app, I would like to change the URL in the address bar, to something like:</p>
  
  <p><code>localhost:3000/homepage</code></p>
  
  <p>Here is part of my routing file:</p>
  
  <pre><code>{
    path: 'token/:token-id',
    component: HomepageComponent,
    resolve: {data: TokenResolver}
  }
  </code></pre>
  
  <p>Here is the resolver:</p>
  
  <pre><code>resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;UserInfo&gt; {
      const tokenId = route.paramMap.get('token-id');
      const apiURL = `${this.apiRoot}/${tokenId}`;
      return this.http.get&lt;UserInfo&gt;(apiURL)
  }
  </code></pre>
  
  <p>I tried to change the routing in the following way:</p>
  
  <pre><code>{
    path: 'token/:token-id',
    resolve: {data: TokenResolver},
    redirectTo: 'homepage'
  },
  {
    path: 'homepage',
    component: HomepageComponent
  }
  </code></pre>
  
  <p>I even tried to remove <code>redirectTo</code> and use <code>resolve: {redirectTo: 'homepage', data: TokenResolver}</code>. Both ways don't work.
  The first one because it seems to execute <code>redirectTo</code> before <code>resolve</code>.
  The second one because I cannot declare a path without a component, or redirectTo and so on.</p>
  
  <p>So I tried the following way:</p>
  
  <p>routing file:</p>
  
  <pre><code>{
    path: 'token/:token-id',
    component: HomepageComponent,
    resolve: {data: TokenResolver}
  },
  {
    path: 'homepage',
    component: HomepageComponent
  }
  </code></pre>
  
  <p>resolver file:</p>
  
  <pre><code>resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;UserInfo&gt; {
    const tokenId = route.paramMap.get('token-id');
    const apiURL = `${this.apiRoot}/${tokenId}`;
    return this.http.get&lt;UserInfo&gt;(apiURL)
      .pipe(map((data) =&gt; {
        this.router.navigate(['homepage'], {state: { data: data }});
        return data;
      }));
  }
  </code></pre>
  
  <p>This works, but as you can see I had to declare <code>HomepageComponent</code> twice in the routing file. In addition I had to return <code>data</code> in the <code>resolve</code> function, even if I'm not using that return anymore.</p>
  
  <p>Do you know a better way to reach what I need?</p>