Angular S3 Static Website - 403 Forbidden Routing Error

Question

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:

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:

<a routerLink="/services">Click here</a>

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

const routes: Routes = [
  { path: '', component: HomeComponent }, 
  { path: 'about-us', component: AboutUsComponent }, 
  { path: 'new-patients', component: NewPatientsComponent }, 
  { path: 'services', component: ServicesProvidedComponent }, 
  { path: 'contact', component: ContactComponent }, 
  { path: '**', component: HomeComponent }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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.

Answer 1

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..

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.

Answer 2

Choose the bucket, go to Objects tab, select all files, click Actions, scroll down and click Make public.