Angular 具有 aws amplify 控制台的应用程序 - 路由

Question

我无法理解 Angular 和 AWS Amplify 控制台的重写和重定向规则。

在我的 angular 应用程序中，我有与此相似的路线：

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 路由器吗？

Answer 1

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

如 aws 文档中所述： https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html "Redirects for Single Page Web Apps (SPA)"

下

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

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

Angular 具有 aws amplify 控制台的应用程序 - 路由

Angular applications with aws amplify console - routing

angular

url-routing

aws-amplify