Routing to Angular components when the application is static content hosted in S3

Question

I am currently developing an application with the Angular4 interface. My goal for production is to have the external interface serve as static content from the AWS S3 bucket.

Everything works with one exception, which is actually a serious 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:

https://myhostname.com/user/userguid?token=tokenvalue

Since the interface is used as static content, in fact there is only an index.html page, so when you click this link, 404 is created.

Now, after some research, I have taken the following steps. In S3, I have the following routing rule.

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>myhostname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

I also have a CloudFront rule that redirects all 404 errors to index.html.

Now, when someone goes to myhostname.com/user/userguid?token=tokenvalue, the URL is rewritten to myhostname.com/#!/user/userguid?token=tokenvalue, but then the user is redirected to myhostname.com/home (aka index.html).

What changes can I make to my Angular application to accept the hash / fragment value and actually go to that component (or rather just redirect, which will send the user back to index.html)?

Note that in development, when the interface is used via "npm start", this works fine. Thanks to everyone.

Answer 1

. .

S3 " -" → "" , "" "index.html". , !

CloudFlare, , . 404 /index.html 200 OK.

!

Answer 2

Zack, , ( Index, Error "index.html" ), , .

, , 404, - SEO, Chrome , , Safari .

:

• index.html,
• Cloudfront S3
• , /index.html ( !) 200 Http Response Code

,

Answer 3

#!, LocationHashStrategy, , . :

<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>

.