azure - 在 Azure 中托管后，在路由级别刷新时，Angular 7 应用程序无法工作

Question

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

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

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

“ Assets ”:[ “src/favicon.ico”， “src/ Assets ”， “src/web.config” ],

在 angular.json 文件内，但以静脉结束。

创建了一个用于url重写的web.config文件并将其放置在Angular应用程序的根目录中，在

中添加了web.config

“ Assets ”:[ “src/favicon.ico”， “src/ Assets ”， “网络配置” ],

在 angular.json 文件内，但以静脉结束。

尝试将 web.config 放置/不放置在 dist 中(使用 ng build --prod 命令创建 dist 后)文件夹，但最终以失败告终。

尝试在 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>

但最终还是以静脉注入(inject)结束。

就我而言<base href="/">在 Angular 应用程序的 dist 和 src 文件夹中的 index.html 中。还可以尝试什么来解决这个问题？

Answer 1

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

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

然后在 azure 中提交。虽然我之前也做了同样的事情，但它终于成功了!!!

谢谢