Accessing Routes in an Angular Application on AWS s3 with Cloudfront

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 mydomain.com/sub. 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 responses like this:

Custom error responses in cloudfront