将Angular2应用程序包含到Asp.Net Webforms页面中 [英] Including an Angular2 application to Asp.Net Webforms Page
本文介绍了将Angular2应用程序包含到Asp.Net Webforms页面中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我将由使用aot配置的angular-cli ng-build生成的js文件包含到我的aspx页面时，我在Chrome控制台中看到一条错误消息；
When I include my js files generated by angular-cli ng-build with aot configuration to my aspx page, I get an error in Chrome console that says;
> TypeError: Error.parameterCount is not a function at
> Function$_validateParameterCount [as _validateParameterCount]
> (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQj8wNIOSpDss44lOGYQrUvAlPdwlDclD9V49ignpuDN2RfK8PuhwsLDLLq…:118)
> at Function$_validateParams [as _validateParams]
> (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQj8wNIOSpDss44lOGYQrUvAlPdwlDclD9V49ignpuDN2RfK8PuhwsLDLLq…:70)
> at String$startsWith
> (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQj8wNIOSpDss44lOGYQrUvAlPdwlDclD9V49ignpuDN2RfK8PuhwsLDLLq…:491)
> at String.startsWith (es6.string.code-point-at.js:7) at
> MapSubscriber.project (GlobalLocationApi.js:138) at
> MapSubscriber._next (combineLatest.js:142) at
> MapSubscriber.Subscriber.next (Subscriber.js:89) at
> XMLHttpRequest.onLoad (xhr_backend.js:69) at ZoneDelegate.invokeTask
> (zone.js:171) at Object.onInvokeTask (ng_zone.js:210) at
> ZoneDelegate.invokeTask (zone.js:170) at Zone.runTask
> (vendor.bundle.js:56413) at XMLHttpRequest.ZoneTask.invoke
> (zone.js:224)
Package.json文件；
Package.json file;
{
"name": "address-component",
"version": "1.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor",
"extract-i18n": "cd src && ng-xi18n",
"ngbuildTr": "ng build --output-hashing=none --output-path=dist-AddressComponent/tr --aot --prod --i18n-file=src/i18n/messages.tr.xlf --i18n-format=xlf --locale=tr",
"ngbuildTr-dev": "ng build --output-hashing=none --output-path=dist-dev-AddressComponent/tr --aot --dev --i18n-file=src/i18n/messages.tr.xlf --i18n-format=xlf --locale=tr",
"ngbuild-dev": "npm run ngbuildTr-dev",
"ngbuild": "npm run ngbuildTr",
"build-dev": "npm install && npm run ngbuild-dev",
"build": "npm install && npm run ngbuild"
},
"private": true,
"dependencies": {
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
"angular2-modal": "^2.0.2",
"core-js": "^2.4.1",
"ng2-auto-complete": "^0.10.9",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.7"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.25.5",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}
Angular试用版Aspx文件；
Angular trial aspx file;
<%@ Page Title="Title" Language="C#" MasterPageFile="~/Master/Mobil.Master" Async="true" AutoEventWireup="true" %>
<%@ Import Namespace="WebCore" %>
<asp:Content ID="Content1" EnableViewState="false" ContentPlaceHolderID="head" runat="Server">
<asp:PlaceHolder ID="MetaPlaceHolder" EnableViewState="false" runat="server" />
<asp:Literal ID="ltCanonical" runat="server"></asp:Literal>
<style type="text/css">
table {
border-spacing: 0;
}
.footer {
display: none !important;
}
.glorious-header .header-row .header-navigation .bttn.orange {
display: none;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<app-root-address-component addressConfigType="1">Loading...</app-root-address-component>
<link href="../Javascript/angular/dist<%= CountryOperation.GetEnvironment() %>-AddressComponent/<%= CountryOperation.GetLanguagePath() %>/styles.bundle.css" rel="stylesheet" />
<script type="text/javascript" src="../Javascript/angular/dist<%= CountryOperation.GetEnvironment() %>-AddressComponent/<%= CountryOperation.GetLanguagePath() %>/inline.bundle.js"></script>
<script type="text/javascript" src="../Javascript/angular/dist<%= CountryOperation.GetEnvironment() %>-AddressComponent/<%= CountryOperation.GetLanguagePath() %>/vendor.bundle.js"></script>
<script type="text/javascript" src="../Javascript/angular/dist<%= CountryOperation.GetEnvironment() %>-AddressComponent/<%= CountryOperation.GetLanguagePath() %>/main.bundle.js"></script>
</asp:Content>
我注意到，如果我从aspx中删除"行，则可以正常运行，但是旧版代码需要该声明.还有其他人有这个问题吗?我该如何解决?我没办法了，谢谢.
I noticed that if I remove "" line from aspx, it works perfectly but legacy code requires that declaration. Anybody else has this problem? How can I solve this? I'm out of options, thanks.
推荐答案
我最近想到了这个方法，下面是我的解决方法；
i recently came up with this, and my workaround was below;
<script>
window.Error.parameterCount = function () {
return this;
}
String.prototype.startsWith = function(key) {
return this.indexOf(key) === 0;
}
</script>
原始错误是由于在角度组件中使用了String.startsWith函数的es6扩展，而该软件包在es5版本中不可用.
the original error is due to the es6 extension of String.startsWith function used in angular components, which is not available at es5 build of the package.
第二个错误是来自zone.js.它缺少Error.parameterCount功能，因此控制台输出有些混乱.
second error was from zone.js. It lacks Error.parameterCount function, so the console output is a bit confusing.
希望这会有所帮助.
这篇关于将Angular2应用程序包含到Asp.Net Webforms页面中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
