Azure上的Angular2应用程序“您无权查看此目录或页面”子路由

Question

我已经发布了一个 Angular2 应用程序并将其部署在 Azure Web 应用程序上。如果我通过浏览到它的根目录来启动它，该应用程序就可以正常工作： http://cafeserver.azurewebsites.net/Web/

但是，如果我直接浏览到应用程序中的子路由，例如这个： http://cafeserver.azurewebsites.net/Web/customers

它会抛出一个错误，指出“您没有查看此目录或页面的权限”。

我该如何解决这个问题？

Answer 1

您需要更新您的 web.config 以将所有路由重定向到索引页面，以便 Angular 路由可以启动。我使用以下配置将 SPA 部署到 Azure：

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="SPA">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

请注意，我的设置免除了对包含 /api 的文件、目录和请求 URI 的请求，因为我将其保留给后端 HTTP 路由。您可以根据您的豁免需求更新您的。