Angular2 - 托管在 Azure 中时页面刷新 404 [英] Angular2 - page refresh 404ing when hosted in Azure

问题描述

我正在开发一个 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 头中有以下内容...

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

解决方案

HashLocationStrategy 通过在所有 Angular 路由中包含 # 来避免这个问题，但实际上并没有修复.

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

为此，请将 Web.config 文件添加到您站点的根文件夹，其中包含以下内容:

<预><代码><配置><system.webServer><重写><规则><规则名称="主规则" stopProcessing="true"><match url=".*"/><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/></条件><action type="重写" url="/"/></规则></规则></rewrite></system.webServer></配置>

I am working on an Angular2 app. It uses "@angular/common": "2.0.0-rc.4" and "@angular/router": "3.0.0-beta.2".

My problem is that when I use the browser refresh on some of the pages I see an error saying...

"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

This also happens if I hit the url directly.

An example url is... https://tilecasev2.azurewebsites.net/profile/therichmond

However if you view pages via the homepage they work ok but only until refreshed (https://tilecasev2.azurewebsites.net).

I have the below in my index.html head...

<base href="/"> 

Why does this happen and how can I fix it?

解决方案

HashLocationStrategy avoids the issue by including a # in all of your angular routes but doesn't really fix it.

To make angular routes without hashes work in azure the same way they do in your local development environment, you just need to configure IIS to rewrite all requests as root. This lets angular handle the routing.

To do this, add a Web.config file to your site's root folder with the following contents:

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

这篇关于Angular2 - 托管在 Azure 中时页面刷新 404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！