ASP.NET Bundle AngularJS

Question

I have an Empty mvc template with Angular client (plain html/js/css) with the following structure.
To achieve bundling and minification, I did the steps from this article. My RegisterBundles method has the following rules:

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));
        }

To link these bundles, I put this into Index.html:

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

Update

I updated the Rewrite rule in the web.config file

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

And I still don't get the bundle. I get 404 not found and this

Are there any rewrite rules involved here? Although it appears that your `.js` file has `html` content in it, it could be that the server is returning your `index.html` page when you ask for `app.js`, for example. — Kirk Larkin, Aug 27 '17 at 15:42
@KirkLarkin Yes, there is. Updated the topic. Is there a fix for this? — Vendor, Aug 27 '17 at 15:49
Have a look at this [supplemental answer](https://stackoverflow.com/questions/22345420/bundling-and-minification-without-asp-net-mvc/28738462#28738462) to the post on bundling you referenced. Also, did you remember to disable debug mode? — Kirk Larkin, Aug 27 '17 at 15:57
@KirkLarkin Thanks for the article. And yes, I have disabled the debug mode. I am working on the exclusion rule for IIS rewriting now — Vendor, Aug 27 '17 at 16:07

score 0 · Answer 1 · answered Aug 30 '17 at 19:58

It appeared that I didn't have the "Bundle module" in IIS (IIS => Your website => Modules), and ALSO the issue with WebGrease package in angular project. So the solution was:
1. In Package manager console execute: Update-package webgrease
2. In web.config make sure to have section:

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

ASP.NET Bundle AngularJS

1 Answers1