angular 2 azure deploy refresh error:您要查找的资源已被删除,名称已更改或暂时不可用

Question

我有一个Angular 2 rc-2应用程序,实现了基本路由.路径是/path1默认路径和/path2.主路径/重定向到/path1.当我在本地运行它(lite-server)时一切正常.我设法将此应用程序部署到Azure Web应用程序.该应用程序工作正常,但如果我在我进入时刷新页面/path1或/path2我收到此错误:The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

一种可能的方法是实现url重写.我在项目中添加了一个web.config文件

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
        <clear />

         <!-- check if its path1 url and navigate to default page -->
        <rule name="Path1 Request" enabled="true" stopProcessing="true">
        <match url="^path1" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         <!-- check if its path2 url and navigate to default page -->
        <rule name="Path2 Request" enabled="true" stopProcessing="true">
        <match url="^path2" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         </rules>
        </rewrite>
    </system.webServer>
</configuration>

在这种情况下,我可以刷新而不会收到此错误消息.但是任何刷新都会将我重定向到默认网址.我刷新/path2并将其重定向到/path1(默认网址).

有什么想改善刷新？:)

Answer 1

您必须将web.config文件添加到根Angular2应用程序.这就是Azure服务器(IIS服务器)的工作方式.

我使用webpack所以我把它放在src文件夹中.在您取消部署时,不要忘记将其复制到您的dist文件夹中.我使用CopyWebpackPlugin来设置我的webpack来复制它.

这是web.config文件:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
                <rule name="AngularJS Routes" 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>

它有两个规则:

第一条规则是将所有呼叫重定向到https.如果您不使用https,请将其删除.

第二条规则是解决您的问题.我在这里得到了第二条规则的参考(感谢www.reddit.com的用户强制关注):

https://www.reddit.com/r/Angular2/comments/4sl719/moving_an_angular_2_app_to_a_real_server/

Answer 2

@Guilherme Teubl方法的简单版本.这对我很有用.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular4" 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 3

如果有人仍然坚持这一点，我想补充两点。

1. 将web.config添加到您的src文件夹中。就我而言，在根目录中有web.config并不能解决问题。

2. .angular-cli.json像这样添加到您的

   "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config" ], ... } ],

Answer 4

在新版本的 Angular 中，将配置路径添加到 Angular.json，并且因为 Angular.json 位于应用程序文件夹中，所以请务必将其添加到 src/web.config

            "assets": [
          "src/assets",
          "src/web.config"
        ],