azure - 在 azure 中托管后在路由级别刷新时,angular 7 应用程序无法正常工作
问题描述
在我们的团队中,我们开发了一个 angular7 应用程序并托管在 azure 中。当 URL 类似于http://xyz.azurewebsites.net/时,无论是否刷新,网站都可以正常工作。我可以通过单击链接毫无问题地遍历页面。例如,可以遍历http://xyz.azurewebsites.net/page1之类的页面,但是这次当我在浏览器中刷新/按 ctrl f5 时,它显示:您要查找的资源已被删除,有它的名称已更改,或暂时不可用。
我用谷歌搜索并尝试了一些解决方法,如下所示:
- 为 url 重写创建了一个 web.config 文件,并将其放在 Angular 应用程序的 src 文件夹中,将 web.config 添加到
“资产”:[“src/favicon.ico”,“src/assets”,“src/web.config”],
在 angular.json 文件中,但以静脉结束。
- 为 url 重写创建了一个 web.config 文件并将其放置在 angular 应用程序的根目录中,将 web.config 添加到
“资产”:[“src/favicon.ico”,“src/assets”,“web.config”],
在 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>
但以静脉曲张告终。
在我的情况下<base href="/">
,在角度应用程序的 dist 和 src 文件夹中的 index.html 中。还有什么办法可以解决这个问题?
解决方案
终于成功了,我只是将 web.config 放在 src 文件夹中,并在 angular.json 中写入了该文件的路径,如下所示:
"assets": [ "src/favicon.ico", "src/assets", "src/web.config" ]
然后在 azure 中提交。虽然我之前也做过同样的事情,但它终于奏效了!!!
谢谢
推荐阅读
- firefox - 如何检查 Firefox 中动态创建的 bootstrap4 元素?
- java - 当文件不存在时,如何从 recyclerview 隐藏删除按钮?
- javascript - 如何使用 HTML 和 CSS 使用 flex div 构建甘特图
- javascript - 从满足条件的对象数组中更新属性值
- dropzone.js - 如何在 IE 11 中使用 Dropzone 5.7.0
- azure - Azure 数据工厂 - Azure Data Lake Gen1 访问
- javascript - 锚标记在 Google Chrome 中不起作用(链接到单独的网页时)
- node.js - 带有 mongodb 的节点:迭代不同的结果而不将所有内容加载到内存中
- c++ - 结构抛出总线错误的推力::设备向量
- sql - SQL redshift select整表或一条记录动态选择题