Lambda@Edge function not being called on Cloudfront error page

I have an Angular app's static files being served on an S3 bucket through Cloudfront. My Cloudfront distribution has error pages set up so it still renders the Angular's index.html. This means that if I request <cloudfront-distribution>.cloudfront.net/home-page, instead of saying that it didn't find a file named home-page on the S3 bucket, it will still render the angular app and the angular app will handle that /home-page route.

I needed to include some security headers on the app server so I set up a Lambda@Edge function to inject those headers on a viewer response event (like described here https://aws.amazon.com/blogs/networking-and-content-delivery/adding-http-security-headers-using-lambdaedge-and-amazon-cloudfront/).

The Lambda@Edge is working for routes that actually correspond to a file in the S3 bucket (if I have a file called image.png on the root folder of my S3 bucket, and I request <cloudfront-distribution>.cloudfront.net/image.png, I see the response headers that I injected via the Lambda@Edge function. The issue is when accessing a route that doesn't correspond to a file in the S3 bucket. If I access <cloudfront-distribution>.cloudfront.net/home-page, S3 will return a 404, Cloudfront will handle the 404 and act accordingly to the Error Pages configuration, i.e., respond with a 200 status code and render the index.html file. And when this happens, I don't see any of the headers I injected via the Lambda@Edge function, while all the other script files of my Angular app have the headers.

How can I make all responses go throught the Lambda@Edge function?

from Lambda@Edge function not being called on Cloudfront error page