Including an Angular2 application to Asp.Net Webforms Page

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.

I think you meant to have within your quotes at the end of your code example. — Jarvis, Mar 02 '17 at 18:04
Just from looking at the ASP.NET documentation on ScriptManager, have you tried setting EnablePageMethods to false to see if that's the culprit. I have a feeling that's what is causing the issue. Still not sure yet how to overcome. — Jarvis, Mar 02 '17 at 18:07
Thanks for the suggestion @Jarvis, I tried EnablePageMethods=false and it didn't solve it, I still get the same ZoneTask.Invoke error. — fritoz, Mar 02 '17 at 18:10
Hrm... Well I guess there may be something else going on... or it might be that the ScriptManager isn't inside a form. This post has the two working together: http://stackoverflow.com/questions/40220207/how-to-stop-a-page-refresh-in-angular-2-within-aspx — Jarvis, Mar 02 '17 at 18:39

score 4 · Accepted Answer · answered Mar 03 '17 at 13:54

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.

score 2 · Answer 2 · answered Mar 06 '19 at 17:41

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

Including an Angular2 application to Asp.Net Webforms Page

2 Answers2

Linked