azure - 需要修复在 Azure 应用服务上运行的 Angular 2 的路由问题

Question

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

本地运行时工作正常。修复问题以不再使用本地 node_modules(根据快速入门中的 deployment steps)并部署到 Azure Web 应用程序后，如果我从根 URL(“/”)开始，该应用程序可以正常工作。但是，使用 Angular 路由，URL 会发生变化(例如更改为“/home”)，并且如果我对该 URL 执行 F5 刷新，则应用程序将无法加载。当我这样做时，我得到一个 404:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

我尝试按照描述使用 web.config here但这没有帮助。看起来确实是 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>