Asp.net 5 Web.Api + IIS + index.html + Angular 4答案

【问题标题】：Asp.net 5 Web.Api + IIS + index.html + Angular 4Asp.net 5 Web.Api + IIS + index.html + Angular 4
【发布时间】：2018-01-03 14:12:45
【问题描述】：

我开始从事一个新的 SPA 项目并决定使用 Angular 4。另外，我有一个用 Asp.Net 5 编写的现有后端并使用 Web.Api 来获取数据。（没有 MVC 控制器、cshtml 等，后端仅用于获取数据！）

我在 *.csproj 附近创建了新的 Angular 项目，并放置了 Web.config 文件（所以这是我网站的根目录）。

问题是 - Angular 将所有文件编译到“dist”文件夹，包括 index.html 但是 IIS 找不到它，因为它的根文件夹更高一级。

我尝试过的：

设置 <base href="/dist/"> ，但随后 Angular 路由器导航到 /dist/*route_path* 而不是 *route_path*
将 IIS defaultDocument 设置为 "/dist/index.html" ，但随后所有捆绑一个 not 找到（404），因为它试图在 index.html 附近找到它们
弹出 Angular webpack 配置并对其进行编辑以达到我的目标。我变了 “Index.html”到“../Index.html”，我正在使用 html *.css 文件中的捆绑包、位 url 无效.. 我不能让所有这些都加前缀与“/dist/”

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： asp.net angular iis asp.net-web-api

【解决方案1】：

如果有人感兴趣，我最终得到了 IIS URL 重写模块，如下所示：

<system.webServer>
    <rewrite>
      <rules>
        <rule name="site">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_URI}" pattern="^/api" negate="true" />
            <add matchType="IsFile" pattern="^/images/" negate="true" />
            <!-- the rest of your rules here... -->
          </conditions>
          <action type="Rewrite" url="/dist/{R:1}" />
        </rule>
      </rules>
    </rewrite>
</system.webServer>

【讨论】：

【解决方案2】：

您可以将两个项目都放在一个根域中。通常它对 SEO 很重要。 angular-cli app 和 webapi 都将在同一个根文件夹中，并且 url 重写将是这样的

<rule name="Angular Routes" stopProcessing="true">
      <match url="(.*)" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_URI}" pattern="^/api" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
     </conditions>
   <action type="Rewrite" url="./index.html" />
</rule>

【讨论】：