Including an Angular2 application to Asp.Net Webfo

Question

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

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.

Answer 1

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>

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.

second error was from zone.js. It lacks Error.parameterCount function, so the console output is a bit confusing.

hope this helps.

Answer 2

Here is how i'm currently loading Angular app inside aspx page:

I remove all contents from the src angular index.html file. Create a simple static method to read AngularCli output index html file: (make sure angular-cli is building to a folder in webforms project

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;
                    }
                }

Then set a variable on aspx page code behind file:

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

Then include the markup on your aspx page.

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

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