Angular S3 Static Website – 403 Forbidden Routing Error


I know there are other questions on stack overflow similar to this, but I haven’t yet been able to resolve my issue. I have an Angular 7 app that I am hosting in S3 using the static website hosting. I haven’t yet purchased a domain or set up CloudFront, as I am still in development of the site.

My issue is that routing is working properly when navigation is triggered by a click event in the nav bar (the code uses router-link), but if I hit refresh on any page other than the root (“/”) I get a 403 Forbidden error from S3:

enter image description here

As I stated, the angular routing seems to be working properly, as I am using router-link in the code to handle navigation, here’s an example:

Here is my app-routing.module.ts code:

I’m thinking, based on other solutions I’ve read, that I need to somehow re-direct to the index page so that the Angular router will kick in, but I’m not sure what configuration I need to add. I thought adding the default route (‘**’) would take care of that, but clearly I was wrong.

When I do my deployments to S3 I always select the option to make all the files publicly accessible, so I do not think that is the issue here.


Ah of course right as I post the question I figured out the answer. I think this is what others had put for answers on similar questions, but instead of deleting this I’ll post what I did to fix the problem, in case it helps others..

enter image description here

I thought this config was in CloudFront, but turns out it is right in the S3 bucket config. For me there previously no value for Error document, and setting it to index.html solved my issue.

Leave a Reply