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

Posted 2021-04-19

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

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

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

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

答案

你可以试试这个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>

另一答案

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();
      }
   });

我做的唯一不同的是将根网址设置为'/'（我的root razor页面托管Angular应用程序）而不是示例中的index.html。我使用的版本是.NET Core 2.2和Angular 7.2.1。