在 IIS 上设置 Angular 深度链接答案

【问题标题】：Setting up Angular deep linking on IIS在 IIS 上设置 Angular 深度链接
【发布时间】：2018-01-19 00:35:00
【问题描述】：

我正在尝试在 IIS 上配置 Angular/ASP.NET 5 应用程序以支持深度链接，以便诸如 domain.com/article/title-slug 之类的 URL 工作

我已使用 IIS 重写模块将以下代码添加到我的 web.config：

<rewrite>
    <rules>
        <rule name="redirect all" stopProcessing="true">
            <match url="^(.*)$" ignoreCase="false" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
            </conditions>
            <action type="Rewrite" url="wwwroot/index.html" appendQueryString="true" />
        </rule>
    </rules>
</rewrite>

我的问题是我的网站不再加载，我有一个空白屏幕，网络选项卡中没有任何内容，也没有来源。

我的 inetpub\site\ 文件夹是 dotnet core publish 文件夹的根目录，并且我在 inetput\site\wwwroot 中有角度构建资产

我的基本 href 是 = "/"，没有重写代码一切正常。

最后，我尝试将我的重写 URL 更改为

<action type="Rewrite" url="/index.html" appendQueryString="true" />

然后我开始收到错误：

inline.f137c7f1f4e2a52a2fb9.bundle.js:1 Uncaught SyntaxError: Unexpected token <
polyfills.25e42e2a7a0746e9ff75.bundle.js:1 Uncaught SyntaxError: Unexpected token <
main.0d9f8e7be2ccd1472551.bundle.js:1 Uncaught SyntaxError: Unexpected token <

【问题讨论】：

您的Startup.cs 文件是什么样的？
根据SyntaxError: Unexpected token <，我想说您收到的是错误页面的内容，而不是预期的 JS 捆绑包 - 对您的设置一无所知，我只想问您是否可以检查 @ 987654326@内容不知何故..？顺便说一句，在我的设置中，只有<action type="Rewrite" url="/" appendQueryString="true" />（url 参数只有"/"）就足够了，不过它是基于 OWIN 的完整 ASP.NET，而不是 Core。
@Brad 我的 startup.cs 很大 - 哪些特定部分会有所帮助？

标签： angular iis asp.net-core

【解决方案1】：

我最终通过废弃 URL 重写模块并在代码中处理它来解决这个问题：

        app.Run(async (context) =>
       {
           context.Response.ContentType = "text/html";
           await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
       });

【讨论】：

这就是我询问您的Startup.cs 文件的原因。我使用app.UseDefaultFiles(); app.UseStaticFiles()，然后使用与您类似的方法来提供 index.html 文件。如果您愿意，我可以发布答案。
请注意，对于 Core 2.1，第一行变为 app.Use(async (context, next) =>。我也把这段代码放在了Startup.cs

【解决方案2】：

遇到了同样的问题。在修改了很多东西之后，将 index.html 文件中的基本 href 标记更改为完全限定的 Url 最终为我解决了这个问题。

之前：

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>MySubApp</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">


  </head>

  <body>
    <mu-root></mu-root>

  <script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

</html>

之后：

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>MySubApp</title>
    <base href="http://MyUrl.com/MySubApp/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">


  </head>

  <body>
    <mu-root></mu-root>

  <script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

</html>

我的重写规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="test" enabled="true" 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="/MySubApp/" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

我的用例是在默认网站下设置应用程序，因此您的设置可能会有所不同。

【讨论】：