title: Routing to Angular components when app is static content hosted in S3
body: <p>I am currently developing an application with an Angular4 frontend. My goal for production is to have the frontend be served as static content from an AWS S3 bucket.</p>
  
  <p>Everything is working with one exception which is actually a major problem for the application. When users register, they are sent an email with a link to verify their email addresses. The format of the link is as follows:</p>
  
  <p><a href="https://myhostname.com/user/userguid?token=tokenvalue" rel="noreferrer">https://myhostname.com/user/userguid?token=tokenvalue</a></p>
  
  <p>As the frontend is served as static content, only the page index.html actually exists, so clicking this link generates a 404.</p>
  
  <p>Now, after some research, I have taken the following steps. In S3, I have the following routing rule.</p>
  
  <pre><code>&lt;RoutingRules&gt;
    &lt;RoutingRule&gt;
      &lt;Condition&gt;
        &lt;HttpErrorCodeReturnedEquals&gt;404&lt;/HttpErrorCodeReturnedEquals&gt;
      &lt;/Condition&gt;
      &lt;Redirect&gt;
        &lt;HostName&gt;myhostname.com&lt;/HostName&gt;
        &lt;ReplaceKeyPrefixWith&gt;#!/&lt;/ReplaceKeyPrefixWith&gt;
      &lt;/Redirect&gt;
    &lt;/RoutingRule&gt;
  &lt;/RoutingRules&gt;
  </code></pre>
  
  <p>I also have a CloudFront rule that redirects all 404 errors to index.html.</p>
  
  <p>Now, when someone navigates to myhostname.com/user/userguid?token=tokenvalue, the URL is re-written to myhostname.com/#!/user/userguid?token=tokenvalue, but then the user is redirected to myhostname.com/home (aka index.html).</p>
  
  <p>What change(s) can I make to my Angular app to take the value of the hash/fragment and actually route to that component (rather that just redirecting, which will send the user back to index.html)?</p>
  
  <p>Note that in development when the frontend is being served via 'npm start', this works just fine. Thanks all.</p>