Azure上的Angular2應用程序「您無權查看此目錄或頁面」子路徑

Question

我已發佈Angular2應用程序並將其部署到Azure Web Apps上。如果我瀏覽到它的根開始它的應用程序正常工作： http://cafeserver.azurewebsites.net/Web/

但是，如果我直接瀏覽到應用程序中的子路徑，比如這一個： http://cafeserver.azurewebsites.net/Web/customers

它會拋出一個錯誤陳述「您無權查看此目錄或頁面。」

我該如何解決這個問題？

Answer 1

你需要更新你的web.config到所有路由重定向到索引頁面，以便角路由可以踢在我用下面的配置部署的SPA天青：

<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路由保留這個URI。您可以根據您的豁免需求更新您的。