Question

当我将带有配置的angular-cli ng-build生成的js文件包含到我的aspx页面时，我在Chrome控制台中收到一条错误消息：

> 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文件;

{
  "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文件;

<%@ 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中删除“”行，它可以完美地工作，但遗留代码需要声明。别人有这个问题吗？我怎么解决这个问题？我没有选择，谢谢。

Answer 1

我最近想出了这个，我的解决方法如下;

   <script>
        window.Error.parameterCount = function () {
            return this;
        }

        String.prototype.startsWith = function(key) {
            return this.indexOf(key) === 0;
        }
    </script>

原始错误是由角度组件中使用的String.startsWith函数的es6扩展引起的，这在包的es5版本中不可用。

第二个错误来自zone.js.它缺少Error.parameterCount功能，因此控制台输出有点令人困惑。

希望这会有所帮助。

Answer 2

这是我当前在aspx页面内加载Angular应用的方式：

我从src angular index.html文件中删除了所有内容。创建一个简单的静态方法来读取AngularCli输出索引html文件：（确保angular-cli正在构建到webforms项目中的文件夹

public class HtmlHelpers
                {
                    public static string LoadSpaScripts(string target)
                    {
                        var html =
                            File.ReadAllText(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "ClientApp/" + target, "index.html"));
                        return html;
                    }
                }

然后在文件后面的aspx页面代码上设置一个变量：

public string SpaModule = HtmlHelpers.LoadSpaScripts("dist");

然后在您的aspx页面上添加标记。

    <base href="/ClientApp/dist/">                      
        <app-root>

            ...Loading
        </app-root>
        <%= SpaModule %>

包括Angular2应用程序到Asp.Net Webforms页面

2 个答案: