CODEWITHSUNDEEP
angularamazon-web-servicesroutesaws-amplify
Heisenbug
Heisenbug

Reputation: 970

AWS amplify routing with angular

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.
enter image description here
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?

Upvotes: 2

Views: 1669

Answers (3)

kdan
kdan

Reputation: 113

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.

Upvotes: 0

HO&#192;NG LONG
HO&#192;NG LONG

Reputation: 459

This json worked for me

[
  {
    "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>",
    "status": "200",
    "target": "/"
  }
]

Refer this

Upvotes: 0

Mazizulak
Mazizulak

Reputation: 41

Please try this solution

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

Upvotes: 3

Related Questions