首页 > 解决方案 > 在 azure 中托管后在路由级别刷新时,angular 7 应用程序无法正常工作

问题描述

在我们的团队中,我们开发了一个 angular7 应用程序并托管在 azure 中。当 URL 类似于http://xyz.azurewebsites.net/时,无论是否刷新,网站都可以正常工作。我可以通过单击链接毫无问题地遍历页面。例如,可以遍历http://xyz.azurewebsites.net/page1之类的页面,但是这次当我在浏览器中刷新/按 ctrl f5 时,它显示:您要查找的资源已被删除,有它的名称已更改,或暂时不可用。

我用谷歌搜索并尝试了一些解决方法,如下所示:

  1. 为 url 重写创建了一个 web.config 文件,并将其放在 Angular 应用程序的 src 文件夹中,将 web.config 添加到

“资产”:[“src/favicon.ico”,“src/assets”,“src/web.config”],

在 angular.json 文件中,但以静脉结束。

  1. 为 url 重写创建了一个 web.config 文件并将其放置在 angular 应用程序的根目录中,将 web.config 添加到

“资产”:[“src/favicon.ico”,“src/assets”,“web.config”],

在 angular.json 文件中,但以静脉结束。

  1. 尝试将 web.config 放置/不放置在 dist 中(在使用 ng build --prod 命令创建 dist 之后)文件夹,但以静脉曲张结束。

  2. 在 web.config 中尝试了两种不同的内容,如下所示:

    第一的:

    <?xml version="1.0"?>
    
    <configuration>
        <system.webServer>
            <staticContent>
                <mimeMap fileExtension=".json" mimeType="application/json" />
                <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
                <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
            </staticContent>
        </system.webServer>
        <system.webServer>
        <rewrite>
            <rules>
                <rule name="angular cli 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>
    

    第二:

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

但以静脉曲张告终。

在我的情况下<base href="/">,在角度应用程序的 dist 和 src 文件夹中的 index.html 中。还有什么办法可以解决这个问题?

标签: azuredeploymentangular7

解决方案


终于成功了,我只是将 web.config 放在 src 文件夹中,并在 angular.json 中写入了该文件的路径,如下所示:

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

然后在 azure 中提交。虽然我之前也做过同样的事情,但它终于奏效了!!!

谢谢


推荐阅读