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

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 通过在所有 Angular 路由中包含 # 来避免该问题，但并没有真正修复它。

要使没有哈希的 Angular 路由在 Azure 中像在本地开发环境中一样工作，您只需将 IIS 配置为以 root 身份重写所有请求。这让 Angular 处理路由。

为此，请将包含以下内容的 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>