Angular applications with aws amplify console - routing

Question

I am having trouble understanding Rewrite and Redirect rules with Angular and AWS Amplify Console.

In my angular application I have routes smiliar to this:

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'frontpage', redirectTo: '/somepath/frontpage', pathMatch: 'full'},
  { path: 'login', component: LoginComponent },
  { path: 'somepath', component: SecureComponent, children: [
    { path: '', redirectTo: '/frontpage', pathMatch: 'full' },
    { path: 'frontpage', component: ForsideComponent }
  ]}
];

Using local server (ng serve / localhost) everything works fine.

But when my application is deployed through the Amplify console the only path that works is somedomain.amplifyapp.com/ which then redirects to somedomain.amplifyapp.com/login (as it should). But entering somedomain.amplifyapp.com/login , somedomain.amplifyapp.com/somepath/frontpage or following links directly gives me a xml access denied page.

The behaviour above is with this rewrite and redirect rule:

[
    {
        "source": "**",
        "target": "/index.html",
        "status": "200",
        "condition": null
    }
]

Anyone know how to set up the rewrite and redirect rules to work with the Angular Router?

Answer 1

Found the answer in the docs. Leaves an answer if anybody else is wondering.

As explained in the aws docs: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html Under "Redirects for Single Page Web Apps (SPA)"

We can add the following rule (with regular expression):

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