加载模板失败:(HTTP 状态:undefined undefined)在 ASP.Net 中压缩后
Failed to load template: (HTTP status: undefined undefined) after bundle minification in ASP.Net
我发现 javascript 与 AngularJs 应用程序的捆绑包在发布模式下没有缩小。它给出了这些类型的错误:
Minification failed. Returning unminified contents.
(12834,21-27): run-time error JS1010: Expected identifier: delete
解决这些错误后,捆绑包确实缩小了,但是现在应用程序将不再在浏览器中启动:它抛出
"Failed to load template error" on the first component.
那么在破坏 angular 模板加载的缩小 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){}
事实证明模板已正确加载,但相应的 angular 组件做了一个 http 请求 "failed" 因为缩小版本如果包含箭头函数则无法正确处理承诺的解析像这样:
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 方法的结果。
所以我猜 angular 错误处理在这里是错误的,让我走错了路。
我发现 javascript 与 AngularJs 应用程序的捆绑包在发布模式下没有缩小。它给出了这些类型的错误:
Minification failed. Returning unminified contents. (12834,21-27): run-time error JS1010: Expected identifier: delete
解决这些错误后,捆绑包确实缩小了,但是现在应用程序将不再在浏览器中启动:它抛出
"Failed to load template error" on the first component.
那么在破坏 angular 模板加载的缩小 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){}
事实证明模板已正确加载,但相应的 angular 组件做了一个 http 请求 "failed" 因为缩小版本如果包含箭头函数则无法正确处理承诺的解析像这样:
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 方法的结果。 所以我猜 angular 错误处理在这里是错误的,让我走错了路。