在azure中托管后，在路由级别刷新时，角度7应用程序无法正常工作

Question

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

我用Google搜索并尝试了一些解决方法，如下所示：

1. 为url rewrite创建了一个web.config文件并将其放在angular应用程序的src文件夹中，在web文件中添加了web.config

“assets”：[“src / favicon.ico”，“src / assets”，“src / web.config”]，

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

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

“assets”：[“src / favicon.ico”，“src / assets”，“web.config”]，

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

3. 尝试放置/不将web.config放在dist中（在使用ng build --prod命令创建dist之后）文件夹但以静脉结束。
4. 在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>

但结束了。

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

Answer 1

问题可能是web.config应该位于wwwroot文件夹的根目录下，而不是在角度应用程序的源代码内。您可以在查看应用服务资源时使用高级工具对此进行验证。点击高级工具，这将导致您到Kudu服务。您可以使用调试控制台查看所有文件。

另一种方法是将您的angular / dist内容放入存储帐户，并使用azure函数代理来处理重定向。如果那些符合您要求的那里有更多信息：https://markheath.net/post/static-websites-azure-blob-storage-functions-proxies

Answer 2

最后工作，我只是将web.config放在src文件夹中，并在angular.json中写入该文件的路径，如下所示：

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

然后在天蓝色的承诺。虽然我早些时候做了同样的事情，但它终于工作了!!!

谢谢