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

Question

我已经发布了Angular2应用并将其部署在Azure Web Apps上。如果通过浏览到其根目录来启动该应用程序，则该应用程序可以正常工作：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为后端HTTP路由保留的请求URI的请求。您可以根据您的豁免需求更新您的。