使用 IIS URL Rewrite 重新加载时，Angular 应用程序未加载参数答案

【问题标题】：Angular application not loading with parameters when reloading with IIS URL Rewrite使用 IIS URL Rewrite 重新加载时，Angular 应用程序未加载参数
【发布时间】：2020-05-09 09:09:32
【问题描述】：

我在本地 IIS 中配置了一个 Angular 8 应用程序。我还安装并配置了 IIS URL 重写。问题是，如果我从起始页访问应用程序，应用程序加载正常。但在任何情况下，如果我重新加载应用程序或尝试使用 URL 访问内页，则会收到以下错误。

请在下面找到我的 IIS URL 重写配置：

<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>

这是 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>

如果我从没有任何 URL 参数的主页访问应用程序，它工作正常。该问题仅出现在有参数的内页中。由于没有参数，因此重新加载也适用于主页。

首页网址：http://localhost:81/BcpApp/home,

内页网址：http://localhost:81/BcpApp/editbcp/5016

我坚信问题出在 IIS URL 重写配置上，因为当我使用节点运行应用程序时，这些问题不存在。

【问题讨论】：

标签： angular iis url-rewriting angular-routing angular8

【解决方案1】：

<base> 标签很重要。它显示了应用程序的“开始”url 部分在哪里。尝试将基础渲染为<base href="/BcpApp/" />。这将使像<script src="/scripts/myscript.js"> 这样的所有调用以及角度路由都以'/BcpApp/' url 部分开头

【讨论】：