Angular on AWS (Cloudfront/S3) for Safari

Question

I have issues viewing my site on Safari. I know there is lots of information to find but I can't figure out what would actually work.

I have an Angular app with angular ui-router, configured like this: $locationProvider.html5Mode(true).hashPrefix('!');

In my index.html

<meta name="fragment" content="!">
<base href="/" />

My S3 configuration is like this:

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

Now, when I F5 a page in Safari, everything after # gets lost. Is there really no chance how I can solve it in 2016?

Answer 1

I found the solution. Apparently the hash in Safari and ios is not dropped if you are using https protocol. You have to add the protocol to S3 redirect options like this:

<Redirect>
    <Protocol>https</Protocol>
    <HostName>test.example.com</HostName>
    <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>

In this example I point to Cloudfront distribution which supports https. With the new Certificate manager it is very easy to install a free SSL certificate.

Answer 2

I found another solution which also allows to have multiple angular apps in subfolders of one bucket and use subdomains at will

S3 Static Website Hosting Route All Paths to Index.html