Accessing routes in an Angular application on AWS S3 with CloudFront

Posted by Steven

As I wrote earlier

"Angular is a SPA-framework which means that an Angular app has exactly one html-file: the index.html. This is the only file a web server knows, that's why theoretically there is only one URL: the one pointing to index.html. However in Angular, it's possible to create routes like Because there is no sub.html file, a request directly to this file will result in a 404 error because the web server cannot serve a non-existing file."

For the same reasons, this is a problem when setting up an Angular application in Amazon Web Services S3 with CloudFront, too.

This article explains how to set up a static website on S3 and CloudFront. It includes the solution for the beforementioned problem, which I want to highlight here:

All traffic generated by accessing Angular-routes is not directed to the index.html and will cause an error like this one:

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: gruppen
RequestId: FD38F05918DEEABE
HostId: M2PYLgTzpZRoGwE1pjKhFw3VguV2lJJ29yyCeNtnc420SPi0sGxQLNKrW63ZZbggt79fY5sIP5E=

The solution is to create two custom error respones like this: