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>

Answer 2

正如冈特指出需要设置HashLocationStrategy。

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

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

Answer 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/

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

3 个答案: