时间戳

首页 > 解决方案 > 无法加载模板：（HTTP 状态：未定义未定义）在 ASP.Net 中的捆绑缩小后

asp.net - 无法加载模板：（HTTP 状态：未定义未定义）在 ASP.Net 中的捆绑缩小后

问题描述

我发现 AngularJs 应用程序的 javascript 包在发布模式下没有缩小。它给出了这些错误：

缩小失败。返回未缩小的内容。(12834,21-27)：运行时错误 JS1010：预期标识符：删除

解决这些错误后，捆绑包确实缩小了，但是现在该应用程序将不再在浏览器中启动：它会抛出一个

第一个组件上的“无法加载模板错误”。

那么，在缩小 javascript 中会发生什么改变会破坏角度模板的加载呢？

这是捆绑配置：

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

这是模块声明：

module Iop.Insight {  (() => {
"use strict";

var app = (<any>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 => {
    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 => $window._]);
app.filter("sanitize", ["$sce", $sce => htmlCode => $sce.trustAsHtml(htmlCode)]);   })(); }

其余的组件和指令如：

module Iop.Insight {  class NavigatieController {  
static $inject = ["navigatieService"];  constructor(private navigatieService: NavigatieService){}

标签： asp.netangularjsbundling-and-minification

解决方案

事实证明模板加载正确，但相应的角度组件做了一个“失败”的 http 请求，因为如果缩小版本包含如下箭头函数，则它会错误地处理 promise 的解析：

 IwillReturnUndefined(): Promise<string> {
  return this.test().then(
    (message) => {
      console.log('log something');
      return message;
    });
}

它将像这样缩小：

  IwillReturnUndefined() {
      return this.test().then(n=>console.log("log something"), n)
  }

从而返回 console.log 方法的结果。所以我猜这里的角度错误处理是错误的，让我走错了路。

推荐阅读