将 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>
原始错误是由于 angular 组件中使用的 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屋！
查看全文
