Angular Routing IIS - 重写仅适用于浅路径答案

【问题标题】：Angular Routing IIS - rewrite only works on shallow pathsAngular Routing IIS - 重写仅适用于浅路径
【发布时间】：2017-06-15 16:10:07
【问题描述】：

关于这个有很多问题。我已经阅读了很多，其中大多数指向配置 IIS 重写的示例 web.config 文件。与我的问题最接近的帖子似乎是这样的：

Angular 2 application not working when moved into IIS virtual directory

但是这已经被否决了两次并且似乎已经死了，所以我没有试图复活它，而是想在这里解释我的问题。

代码作为 ASP.NET 应用程序托管在：http://127.0.0.1/angular-app/

Angular 代码是通过以下命令构建的：ng build --base-href ./，生成的 /dist/ 文件夹是托管在上述本地地址的代码。

IIS 应用程序具有以下 web.config 文件：

<?xml version="1.0"?>
<configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.5.2" />
      <httpRuntime targetFramework="4.5.2" />
    </system.web>
    <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="^/(api)" negate="true" />
            </conditions>
            <action type="Rewrite" url="./" />
            </rule>
        </rules>
        </rewrite>
    </system.webServer>
</configuration>

通过此设置，这些 URL 将返回预期的内容：

http://127.0.0.1/angular-app/

http://127.0.0.1/angular-app/dashboard/

http://127.0.0.1/angular-app/heros/

URL 重写规则正确指向应用程序基目录，因此找到了vendor.js, main.js 等文件。

但是，对于更长的 URI，重写规则似乎只查看链接文件的文件夹路径的后退一步。例如网址

http://127.0.0.1/angular-app/heros/20/

将正确返回index.html 并显示“app-loading”

然而深入挖掘，它似乎试图从基本目录http://127.0.0.1/angular-app/heros/ 加载vendor.js, main.js 等文件，这只是一步，而不是直接从路径中加载。

这些链接随后也被重定向回index.html 文件，因此没有任何脚本传送到浏览器。

我尝试过使用

<base href="/">

而不是 ./ 并相应地修改重写规则，但这具有始终将内容重定向到 http://127.0.0.1/ 的效果

按照链接帖子中的建议，我将基本 href 更改为：

<base href="/angular-app/">

这会从正确的位置返回index.html。然而，vendor.js, main.js 等文件仍被服务器根 (http://127.0.0.1/) 请求

我假设我可以通过简单地手动编辑 index.html 文件以从根目录指向正确的路径来解决此问题，但这似乎是一种 hack 而不是修复。

谁能解释一下这里发生了什么，为什么会这样：

<base href="/">

为大多数人工作，但不是我？

【问题讨论】：

标签： angular iis url-rewriting routing

【解决方案1】：

我的解决方案，

利用 .aspx 页面的强大功能停止使用相对路径。这样所有东西都可以硬编码

我在 /src/ 文件夹中创建了一个新的 default.aspx 页面，并从 /dist/index.html 复制了生成的代码

这个代码然后被调整到这个，

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="src_Default" %>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>angular-app</title>
  <base href="<%=ResolveUrl("~/")%>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="<%=ResolveUrl("~/favicon.ico")%>" >
</head>
<body>
  <app-root>Loading...</app-root>
  <script type="text/javascript" src="<%=ResolveUrl("~/inline.bundle.js")%>"></script>
  <script type="text/javascript" src="<%=ResolveUrl("~/polyfills.bundle.js")%>"></script>
  <script type="text/javascript" src="<%=ResolveUrl("~/styles.bundle.js")%>"></script>
  <script type="text/javascript" src="<%=ResolveUrl("~/vendor.bundle.js")%>"></script>
  <script type="text/javascript" src="<%=ResolveUrl("~/main.bundle.js")%>"></script></body>
</html>

基本上解决服务器上的 asp.net 应用程序的 bae 并将其写入所有引用 - 包括 <base href="" />

然后更改 .angular-cli.json 文件，使其将 Default.aspx 和 default.aspx.cs 文件复制到构建时的 /dist/ 文件夹

"assets": [
    "Default.aspx",
    "Default.aspx.cs",
    "web.config",
    "assets",
    "favicon.ico"
  ],

在此过程中，我还发现这是复制我的 web.config 文件的正确方法，我一直在手动执行此操作 - 所以这是一种解脱。

经过一些 IIS 调整以确保 default.aspx 在默认文档中更高，列出一切正常。

目前似乎是一个解决方案，但如果这些文件得到版本控制，我可以看到这将成为一个问题....但是当/如果我得到它时，我会越过那座桥。

【讨论】：