title: Failed to load template: (HTTP status: undefined undefined) after bundle minification in ASP.Net
body: <p>I discovered that the javascript bundle with the AngularJs application didn't minify in release mode. It gave these kind of errors:</p>
  
  <blockquote>
    <p>Minification failed. Returning unminified contents.
    (12834,21-27): run-time error JS1010: Expected identifier: delete</p>
  </blockquote>
  
  <p>After resolving these errors the bundle did minify, however now the app won't startup anymore in the  browser: it throws a </p>
  
  <blockquote>
    <p>"Failed to load template error" on the first component. </p>
  </blockquote>
  
  <p>So what can change in the minified javascript that breaks the loading of the angular template?</p>
  
  <p>this is the bundle config:</p>
  
  <pre><code>      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
      "~/scripts/jquery-{version}.js",
      "~/scripts/jquery.initialize.js",
      "~/scripts/jquery.scrollTo.min.js"));
  
    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
      "~/scripts/bootstrap.js"));
  
    bundles.Add(new ScriptBundle("~/bundles/angular").Include(
      "~/scripts/underscore.js",
      "~/scripts/angular.js",
      "~/scripts/angular-animate.js",
      "~/scripts/i18n/angular-locale_nl-nl.js",
      "~/scripts/angular-ui/ui-bootstrap.js",
      "~/scripts/angular-ui/ui-bootstrap-tpls.js",
      "~/scripts/dir-pagination.js",
      "~/scripts/ng-ckeditor.js"));
  
    bundles.Add(new ScriptBundle("~/bundles/chart").Include(
      "~/scripts/moment.js",
      "~/scripts/chart.js",
      "~/scripts/angular-chart.js"));
  
    bundles.Add(new StyleBundle("~/Content/css/style").Include(
      "~/Content/css/style.css"));
  
    bundles.Add(new ScriptBundle("~/bundles/app").Include( //this bundle didn't minify but the app loaded properly, now that it does minify the templates won't load
        "~/scripts/AdminTemplate.js",
        "~/scripts/goalSeek.js",
        "~/scripts/app/app.js")
      .IncludeDirectory("~/Scripts/app/", "*.js", true));
  
    bundles.Add(new TemplateBundle("~/bundle/templates", _options)
      .IncludeDirectory("~/scripts/app/", "*.html", true));
  </code></pre>
  
  <p>This is the module declaration:</p>
  
  <pre><code>module Iop.Insight {  (() =&gt; {
  "use strict";
  
  var app = (&lt;any&gt;window).app = angular.module("InsightModule", ["ngAnimate", "ui.bootstrap", "chart.js", "ngLocale", "angularUtils.directives.dirPagination", "ngCkeditor"]);
  app.config(config);
  config.$inject = ["$compileProvider", "$uibTooltipProvider", "$httpProvider"];
  
  function config($compileProvider, $uibTooltipProvider, $httpProvider) {
    $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?:|ms-excel:ofe\|u\||ms-word:ofe\|u\|)/);
    $compileProvider.debugInfoEnabled(true);
    $uibTooltipProvider.options({
      appendToBody: true
    });
    $httpProvider.defaults.transformResponse.push(responseData =&gt; {
      if (typeof responseData === "object") {
        //If the responseData is an object. We want to convert all Iso8601 DateTime strings within it to JavaScript Date object.
        new Iso8601ConversionService().convert(responseData);
      }
  
      return responseData;
    });
  }
  
  app.factory("_", ["$window", $window =&gt; $window._]);
  app.filter("sanitize", ["$sce", $sce =&gt; htmlCode =&gt; $sce.trustAsHtml(htmlCode)]);   })(); }
  </code></pre>
  
  <p>The rest of the components and directives like:</p>
  
  <pre><code>module Iop.Insight {  class NavigatieController {  
  static $inject = ["navigatieService"];  constructor(private navigatieService: NavigatieService){}
  </code></pre>