ASP.NET 捆绑 AngularJS答案

【问题标题】：ASP.NET Bundle AngularJSASP.NET 捆绑 AngularJS
【发布时间】：2018-02-04 23:52:59
【问题描述】：

我有一个带有 following 结构的 Angular 客户端（纯 html/js/css）的空 mvc 模板。
为了实现捆绑和缩小，我按照this 文章中的步骤进行操作。我的 RegisterBundles 方法有以下规则：

public static void RegisterBundles(BundleCollection bundles)
        {
            //bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(
            //    "/App/","*.js", true));
            bundles.Add(new StyleBundle("~/bundles/styles.css").Include(
                "/Content/*.css"));

            bundles.Add(new ScriptBundle("~/bundles/app.js").Include(
                "~/App/app.modules.js")
                .IncludeDirectory("~/App/Components/", "*Module.js", true)
                .IncludeDirectory("~/App/Components/", "*Service.js", true)
                .IncludeDirectory("~/App/Components/", "*Controller.js", true));
        }

为了链接这些捆绑包，我将其放入 Index.html：

<link href="/bundles/styles.css" rel="stylesheet"/>
<script src="/bundles/app.js" type="text/javascript" language="text/javascript"></script>

更新

我更新了 web.config 文件中的重写规则

    <system.webServer>
        <httpErrors errorMode="Detailed" />
        <asp scriptErrorSentToBrowser="true"/>
        <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" />
                <add input="{REQUEST_URI}" negate="true" pattern="^/bundles/styles$" ignoreCase="true"/>
                <add input="{REQUEST_URI}" negate="true" pattern="^/bundles/app$" ignoreCase="true"/>
              </conditions>
              <action type="Rewrite" url="/" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>

我仍然没有收到包裹。我得到 404 not found 和this

【问题讨论】：

这里有没有涉及到重写规则？尽管您的.js 文件中似乎包含html 内容，但例如，当您请求app.js 时，服务器可能正在返回您的index.html 页面。
@KirkLarkin 是的，有。更新了话题。有解决办法吗？
看看这个supplemental answer 到你引用的关于捆绑的帖子。另外，你记得禁用调试模式吗？
@KirkLarkin 感谢您的文章。是的，我已经禁用了调试模式。我正在研究 IIS 重写的排除规则

标签： asp.net angularjs bundling-and-minification

【解决方案1】：

看来我在 IIS 中没有“捆绑模块”（IIS => 您的网站 => 模块），还有 Angular 项目中的 WebGrease 包的问题。所以解决方案是：
1. 在包管理器控制台中执行：Update-package webgrease
2. 在web.config 确保有部分：

<system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <remove name="BundleModule"/>
      <add name="BundleModule" type="System.Web.Optimization.BundleModule"/>
    </modules>
</system.webServer>

【讨论】：