带有AWS Amplify控制台的Angular应用程序-路由

Question

我在使用Angular和AWS Amplify Console了解重写和重定向规则时遇到麻烦。

在我的有角度的应用程序中，我有一些与此相关的路由：

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 }
  ]}
];

使用本地服务器（ng serve / localhost），一切正常。

但是，当通过Amplify控制台部署我的应用程序时，唯一可行的路径是somedomain.amplifyapp.com/该路径，然后重定向到somedomain.amplifyapp.com/login（应该的）。但进入somedomain.amplifyapp.com/login，somedomain.amplifyapp.com/somepath/frontpage或者直接以下链接给我一个XML拒绝访问页面。

上面的行为是与此重写和重定向规则一起使用的：

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

有谁知道如何设置重写和重定向规则以与Angular Router一起使用？

Answer 1

在文档中找到了答案。如果其他人想知道，请留下答案。

如AWS文档中所述：https ://docs.aws.amazon.com/amplify/latest/userguide/redirects.html 在“单页Web应用程序（SPA）的重定向”下

我们可以添加以下规则（使用正则表达式）：

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