使用 IIS URL 重写重新加载时，Angular 应用程序未加载参数 [英] Angular application not loading with parameters when reloading with IIS URL Rewrite
问题描述
我在本地 IIS 中配置了一个 Angular 8 应用程序.我还安装并配置了 IIS URL Rewrite.问题是，如果我从起始页访问该应用程序，它会正常加载.但是，如果在任何情况下，我重新加载应用程序或尝试使用 URL 访问内页，我都会收到以下错误.
请在下面找到我的 IIS URL 重写配置:
<预><代码><配置><system.webServer><重写><规则><规则名称="AngularJS 路由" stopProcessing="true"><match url=".*"/><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/><add input="{REQUEST_URI}" pattern="^/$" negate="true"/></条件><action type="重写" url="./index.html"/></规则></规则></rewrite></system.webServer></配置>这是 index.html :
<html lang="zh-cn"><头><meta charset="utf-8"/><title>业务连续性规划工具</title><base href="./"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="icon" type="image/x-icon" href="favicon.ico"/><link rel="stylesheet" href="styles.6d575a836e8b4e63af3b.css"></head><身体><app-root></app-root><script src="runtime-es2015.d3bc0f0c5758d81e0404.js" type="module"></script><script src="polyfills-es2015.f2e75f3c844d6aea9986.js" type="module"脚本><script src="runtime-es5.1b294c6bb1a350f5c4a5.js" nomodule></script><script src="polyfills-es5.c56107a30ff96141ff8f.js" nomodule></script></script>scripts.e84dbffa93eee937834f.js"></script><script src="main-es2015.b4de925263cc98440efd.js" type="module"></script><script src="main-es1b3ab7ef2.js" nomodule></script></body></html>如果我从没有任何 URL 参数的主页访问应用程序，它工作正常.该问题仅出现在有参数的内页中.由于没有参数，重新加载也适用于主页.
主页网址:http://localhost:81/BcpApp/home,
内页网址:http://localhost:81/BcpApp/editbcp/5016
我坚信问题出在 IIS URL 重写配置上，因为当我使用 node 运行应用程序时，这些问题不存在.
<base href="/BcpApp/"/>.这将使所有像 <script src="/scripts/myscript.js"> 以及角度路由这样的调用都加上 '/BcpApp/' url 部分
I have an Angular 8 application configured in my local IIS. I have also installed and configured IIS URL Rewrite. The issue is that the application is loading fine if I access it from the start page. But if at any instance, I reload the application or if I try to access the inner pages using the URL, I get the following error.
Please find my IIS URL Rewrite config below :
<configuration>
<system.webServer>
<rewrite>
<rules>
<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" />
<add input="{REQUEST_URI}" pattern="^/$" negate="true"/>
</conditions>
<action type="Rewrite" url="./index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
This is the index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Business Continuity Planning Tool</title>
<base href="./" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.6d575a836e8b4e63af3b.css"></head>
<body>
<app-root></app-root>
<script src="runtime-es2015.d3bc0f0c5758d81e0404.js" type="module"></script><script src="polyfills-es2015.f2e75f3c844d6aea9986.js" type="module"></script><script src="runtime-es5.1b294c6bb1a350f5c4a5.js" nomodule></script><script src="polyfills-es5.c56107a30ff96141ff8f.js" nomodule></script><script src="scripts.e84dbffa93eee937834f.js"></script><script src="main-es2015.b4de925263cc98440efd.js" type="module"></script><script src="main-es5.cb2c1b5748b9aef1ff23.js" nomodule></script></body>
</html>
If I access the application from the home page which doesn't have any URL parameters, its working fine. The issue comes up only in the inner pages where there is a parameter. The reload also works on homepage as there are no parameters.
Home page URL : http://localhost:81/BcpApp/home,
Inner page URL : http://localhost:81/BcpApp/editbcp/5016
I strongly believe that the issue is on the IIS URL rewrite configuration as these issues are not present when I am running the application using node.
<base> tag is important. It shows where is the "start" url part of your application.
try rendering base as <base href="/BcpApp/" />. this will make all calls like <script src="/scripts/myscript.js"> as well as angular routing to be prepended with '/BcpApp/' url part
这篇关于使用 IIS URL 重写重新加载时，Angular 应用程序未加载参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
