I've build and angular 8 app and deployed to AWS amplify by connecting to a branch in my repository.
Routing works on my localhost and it also works on deployed version. The problem is when I reload the page on some sub-route.
It looks like amplify routing takes care of that request and ignore my angular routing. Reload only works on root page.
I tried this https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html with redirecting /<*> everything to '/' but I had no luck with that.
Where and how can I change the way Amplify handles url paths?
3 Answers
I also had the same issue and when I apply "Redirects for Single Page Web Apps (SPA)" method it solved everything
Official Doc: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html
1 Comment
KrustyHack
Thanks, it works well ! Here is the path in text (instead of image which was a nightmare to copy from, lol) :
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>This json worked for me
[
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>",
"status": "200",
"target": "/"
}
]
Comments
I resolved this issue following these steps:
In the Amplify Console, navigate to the “Rewrites and redirects” section. Update the redirect rule with these settings:
Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Type: 200
This regex-based rule ensures problematic routes redirect to index.html.
Comments
{useHash: true}(in your App Module imports:RouterModule.forRoot(routes, { useHash: true }). This is what I ended up doing with my static sites hosted in S3 buckets