Включение приложения Angular2 на страницу веб-форм Asp.Net

Question

Когда я включаю мои js-файлы, сгенерированные angular-cli ng-build с настройкой, в мою страницу 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"
  }
}

Угловой пробный файл 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>

исходная ошибка связана с расширением es6 String.startsWith функция, используемая в угловых компонентах, которая недоступна при сборке пакета es5.

вторая ошибка была из zone.js. Не хватает Error.parameterCount функция, поэтому вывод на консоль немного сбивает с толку.

надеюсь это поможет.

Answer 2

Вот как я сейчас загружаю приложение Angular на странице aspx:

Я удаляю все содержимое из файла src angular index.html. Создайте простой статический метод для чтения html-файла выходного индекса AngularCli: (убедитесь, что angular-cli строится в папке в проекте веб-форм

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 %>