Angular 10 + AWS S3 + Cloudfront：没有散列的导航

Question

我在这里看到了很多解决这个问题的问题，但是使用 apache 服务器，对于我的应用程序，我正在使用 AWS S3 和 Cloudfront，我需要应用程序在 URL.

有没有什么方法可以刷新，或者不使用哈希直接点击链接？

如果需要代码的任何部分，我可以包含它，但我认为没有必要，因为没有任何问题，我只需要一个可行的策略。

此致。

我的应用路由模块

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { useHash: true })
  ],
  exports: [
    RouterModule
  ]
})

删除哈希 true 对导航有效，但对页面刷新或直接链接无效

Answer 1

删除散列策略，

RouterModule.forRoot(routes, {
  useHash: false
});

转到存储桶的静态网站托管设置并将错误文档设置为 index.html。

基本上，我们只想在所有情况下提供 index.html 因为这是在所有情况下都必须提供的文件，因为 angular build 没有静态网站等路由的文件夹结构.

现在您的路线将如下所示：

localhost:4200/home

而不是：

localhost:4200/#/home

来自 AWS 的参考资料：https://docs.aws.amazon.com/AmazonS3/latest/userguide/CustomErrorDocSupport.html#custom-error-document

Answer 2

在编写解决方案之前，让我简短地解释一下需要做什么。通常，单页应用程序 (SPA) 中的页面导航是通过 javascript 代码操纵视图 and/or 监视 url 和导航历史事件来实现的。当您启动应用程序并单击不同的 link 时，例如 /user，应用程序不会重新加载，它仍然是通过根 index.html 加载的同一个应用程序，它对单击的 [=57] 做出反应=] 切换到相应的视图或组件，修改地址栏中的url。

但是，如果您在打开浏览器后直接导航到 example.com/user（没有初始加载根目录 example.com），浏览器将向 /user 路径发送请求，但该路径不会'它实际上不存在，也不存在于 S3 存储桶中，也不存在于云端分发中，尽管它会失败。我们的目标是强制 S3 和 Cloudfront 始终 return 根 index.html 文件，与请求的原始路径无关。

为了实现这一点，您需要稍微更改 S3 存储桶和 Cloudfront 分发的配置。

在移动到AWS相关更改之前，将RouterModule导入的useHash 属性更改为false:

RouterModule.forRoot(routes, { useHash: false })

在 AWS Web 控制台中打开您的 S3 存储桶，转到“属性”选项卡，找到“静态网站托管”部分，如果它被禁用，请启用它，并将 index.html 放入两个字段：索引文档和错误文档.

然后保存配置。实际上，现在您的 index.html 文件将用于与根路径相同的任何路径。在应用上述更改后打开网站时，您应该已经注意到了。但是，您会注意到响应代码是 404，尽管应用程序正确打开 - 这是因为它仍然是“未找到”响应，因为路径不存在。云端配置也需要进行一些更改，以使其工作得更好。

导航到 aws web 控制台中的云端分发页面。我假设由于您已经拥有云端分发（您在问题中提到了它），那么您可能已经拥有所有默认设置并且您的 S3 存储桶已经作为该分发的源连接。导航到“错误页面”选项卡并按“创建新的自定义错误响应”。在“自定义”输入中点击“是”，select错误代码404，在“响应页面路径”输入中写入“/index.html”，select代码200OK作为响应。然后保存配置。开始工作可能需要几分钟时间。

现在尝试打开网站 - 您应该不会再看到 404 响应，因为现在所有请求（甚至是不存在的路径）都有代码 200。

Angular 10 + AWS S3 + Cloudfront：没有散列的导航

Angular 10 + AWS S3 + Cloudfront: navigation without a hash

amazon-s3

amazon-web-services

amazon-cloudfront

single-page-application

angular