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

问题描述

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

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

"您要查找的资源已被删除，名称已更改或暂时不可用."

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

This also happens if I hit the url directly.

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

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

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

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

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

<base href="/"> 

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

Why does this happen and how can I fix it?

推荐答案

HashLocationStrategy通过在所有成角度的路径中都包含#来避免该问题，但实际上并没有修复.

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

要使没有哈希的斜线路由在本地开发环境中的运行方式完全相同，只需要将IIS配置为以root身份重写所有请求即可.这可以让角度处理路由.

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.

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

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中托管时页面刷新404ing的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！