静态网站回退问题在Azure上部署Angular

Question

我正在尝试将Angular应用程序部署到Azure静态网站。我按照本教程配置了环境：Medium tutorial for Azure static websites

我遇到的问题是在尝试访问例如myurl.com/mypage（只有myurl.com正常工作）的情况下的后备。

我正在使用ng build --prod构建Angular。

当它在IIS上运行时，我尝试了以下web.config：web.config，将其放在/ src文件夹中，并按如下所示更改了angular.json：

"assets": [
     ...
     "src/web.config"
],

并将其放置在正确的根文件夹中。

我的问题是，当我尝试访问myurl.com/mypage

时仍然收到404

Answer 1

也许这可以帮助其他人：

在您的存储帐户上->静态网站 你会找到：

两者都应为index.html

Answer 2

您可以通过在src / assets中创建名为route.json的文件来指定fallback route。它应包含：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

Answer 3

我在 src 文件夹中指定了包含以下内容的 staticwebapp.config.json 文件。这对我有用并解决了 Angular 站点上的深层链接问题。我还启用了“useHash”。希望这可以帮助某人。我最初在新的 Azure 静态 Web 应用程序上尝试了此修复程序，但此重写也适用于 Azure 存储静态网站。

 {
   "navigationFallback": {
    "rewrite": "index.html",
     "exclude": [ "/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}" ]
   }
 }