Fix AWS amplify angular app error on Access Denied error

When deploy your angular app on AWS amplify, the first landing page is able to load. However, when you defined a path in your router, and try to access it, you would hit Access Denied error:

The solution is to navigate to AWS console, select “ Rewrites and redirects”, add a new rewrite and redirects, click on “ Open text editor”, and add the below rule:

[
    {
        "source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

Try again to access your url, it should work now.

Originally published at https://victorleungtw.com on September 19, 2020.