需要修复在Azure App服务上运行的Angular 2的路由问题

Question

我有一个基于Angular 2 "Tour of Heroes" Quick Start的角度2网站。

在本地运行时工作正常。修复后不再使用本地node_modules（从快速入门的deployment steps开始）并部署到Azure Web应用程序，如果我从根URL（“/”）开始，应用程序正常工作。但是，使用Angular路由更改URL（例如“/ home”），如果我对该URL执行F5刷新，则无法加载应用程序。当我这样做时，我得到了404：

  

您要查找的资源已被删除，名称已更改或暂时不可用。

我尝试使用如here所述的web.config，但这没有帮助。它似乎是一个IIS问题，它试图提供一个页面，而不是从index.html开始。我的路线在Angular中定义，它们在本地工作。

Answer 1

您可以尝试这个web.config文件

<configuration>
    <system.webServer>
         <rewrite>
            <rules>
              <rule name="AngularJS Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="/" />
              </rule>
            </rules>
          </rewrite>
          <caching enabled="true" enableKernelCache="true">
              <profiles>
                  <add extension=".js" policy="DisableCache" kernelCachePolicy="DisableCache" />
              </profiles>
          </caching>
    </system.webServer>
</configuration>

Answer 2

web.config解决方案根本不适合我。经过一天左右的挖掘和拔头发，我遇到了this post，为我解决了这个问题。对于与任何/ api /请求都不相关的404，它似乎在做类似的事情，提供根页面，然后Angular路由应加入并提供正确的视图。按照上面的链接，在void Configure（）方法开头的Startup.cs中，我插入了以下代码：

    app.Use(async (HttpContext context, Func<Task> next) =>
    {
      await next.Invoke();

      if (context.Response.StatusCode == 404 && !context.Request.Path.Value.Contains("/api"))
      {
          context.Request.Path = new PathString("/");
          await next.Invoke();
      }
   });

我唯一做过的事情是将根url设置为“ /”（托管Angular应用程序的我的根剃须刀页面），而不是示例中的index.html。我使用的版本是.NET Core 2.2和Angular 7.2.1。

Answer 3

在 src/assets/routes.json 中添加这个文件

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

让我知道它是否有效？

Answer 4

不确定是否为时已晚，但这是您需要的

1. app-routing.module.ts 添加 useHash: true
2. 修改您的导航以使用 #
3. 编译您的应用程序：ng build --configuration production
4. 将您的文件上传到您的静态站点