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

【问题标题】：Angular2 - page refresh 404ing when hosted in AzureAngular2 - 在 Azure 中托管时页面刷新 404
【发布时间】：2016-12-13 21:32:22
【问题描述】：

我正在开发一个 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="/">

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

【问题讨论】：

听起来像是 stackoverflow.com/questions/31415052/… 的翻版
我认为路由器从那以后发生了变化，修复不再起作用。
与路由器无关。服务器需要支持 HTML5 pushState 或者你需要切换 Angular2 路由器使用HashLocationStrategy 则不需要服务器支持。
是的，就是这样，太棒了，谢谢。我遵循了这些步骤，现在一切正常。 angular.io/docs/ts/latest/api/common/index/…

标签： azure angular angular2-routing

【解决方案1】：

正如 Gunter 指出的 HashLocationStrategy 需要设置。

我按照 Angular2 文档中的步骤进行操作，现在一切正常...

https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

【讨论】：

我不认为这是解决方案

【解决方案2】：

HashLocationStrategy 通过在所有角度路线中包含# 来避免该问题，但并没有真正修复它。

要使没有散列的角度路由在 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>

【讨论】：

这是为我做的！谢谢史蒂夫！
搜索 - 复制 - 它有效！我喜欢stackoverflow。谢谢。
我把 web.config 放在 'src' 文件夹中，现在一切正常。
我补充说，在您将这个 web.config 添加到应用程序的 src 文件夹中之后，您更新 webpack 以包含它。如果您使用 angular-cli 更新 angular-cli.json 文件并将其包含在资产部分。 “资产”：[“web.config”...]

【解决方案3】：

如果您在同一个应用服务计划中同时部署 Angular 和 API 项目，那么这就是解决方案。

<configuration>
<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_URI}" pattern="^/api" negate="true" />
          <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>

更多详情请参考此链接https://less0.github.io/azure-angular-II/

【讨论】：