*NoSuchKey* error when accessing a Angular route of a PWA stored in S3

Question

I'm developing a PWA using Angular 7 and Ionic 4 and stroring it a bucket in Amazon S3.

Of course my app have routes. For example:

myapp.com
myapp.com/items
myapp.com/items/1

The first time the App is access, or when it is updated, it is necessary to access it via root url ( myapp.com ), otherwise NoSuchKey error will occur. When myapp.com/items is accessed when acessing the app for the first time this error occurs.

The cause is obvious. Angular is responsable for handling routes. When the PWA accessed via root url it first downloads the PWA to the browser's cache. After that the PWA handles the routes.

But when the app is accessed for the first time via a route, myapp.com/items for example, as there's no PWA stored in the browser, the request is handled by S3 that tries to access an object called items stored in the bucket. This object obviously don't exists. So I get an NoSuchKey error.

How could to handle the NoSuchKey error when using Angular routes and S3?

Answer 1

A workaround for this issue is to redirect the page not found error to the PWA index page. In AWS CloudFront, go to Error Pages and click Create a Custom Error Response. Then fill out:

• HTTP Error Code: 404

• Response Page Path: /index.html

• HTTP Response Code: 200

It worked for me :)