Angular2 - 在Azure中托管时页面刷新404

Question

我正在开发一个Angular2应用程序.它使用"@ angular/common":"2.0.0-rc.4"和"@ angular/router":"3.0.0-beta.2".

我的问题是,当我在某些页面上使用浏览器刷新时,我看到一个错误说...

" 您要查找的资源已被删除,名称已更改,或暂时无法使用."

如果我直接点击网址也会发生这种情况.

一个示例网址是... https://tilecasev2.azurewebsites.net/profile/therichmond

但是,如果您通过主页查看页面,它们可以正常工作,但只能刷新(https://tilecasev2.azurewebsites.net).

我的index.html头文中有以下内容...

<base href="/"> 

为什么会发生这种情况,我该如何解决？

Answer 1

HashLocationStrategy通过#在所有角度路线中包含一个但没有真正修复它来避免这个问题.

要使没有哈希的角度路由在本地开发环境中以与在本地开发环境中相同的方式工作,您只需要配置IIS以root身份重写所有请求.这使角度处理路由.

为此,Web.config请使用以下内容将文件添加到站点的根文件夹中:

<configuration>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="Main Rule" 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>
</system.webServer>
</configuration>