5

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:

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

schuno
  • 545
  • 6
  • 11

4 Answers4

9

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.

Community
  • 1
  • 1
schuno
  • 545
  • 6
  • 11
2

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

gdrt
  • 3,160
  • 4
  • 37
  • 56
0

My team uses python to manage our infrastructure in AWS. Adding ErrorResponses to our asw_cloudfront.Distribution did the trick for us.

aws_cloudfront.Distribution(
...
error_responses = [
    aws_cloudfront.ErrorResponse(http_status=403, response_http_status=200, response_page_path='/index.html'),
    aws_cloudfront.ErrorResponse(http_status=404, response_http_status=200, response_page_path='/index.html')
])
Andy
  • 49
  • 6
0

this worked for me, Amazon S3 > Buckets > under Properties >> section "Requester pays" >> should be "enabled"

Nagesh ST
  • 1