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 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager> within your quotes at the end of your code example. — Jarvis
– Jarvis, Commented Mar 2, 2017 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
– Jarvis, Commented Mar 2, 2017 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
– fritoz, Commented Mar 2, 2017 at 18:10
Have you tried to move the <script> tags away from the ScriptManager? ScriptManager must be inside a form to work. Is this page inside a form? Can you move the Angular script files outside of that form so the ScriptManager isn't looking at them at all? Of course that won't work if the CountryOperation.GetEnvironment() is using the ScriptManager to call back to a page method... — Jarvis
– Jarvis, Commented Mar 2, 2017 at 18:25
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: stackoverflow.com/questions/40220207/… — Jarvis
– Jarvis, Commented Mar 2, 2017 at 18:39

denolk · Accepted Answer · 2017-03-03 13:54:09Z

4

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.

answered Mar 3, 2017 at 13:54

denolk

76814 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mike Lunn · Accepted Answer · 2019-03-06 17:41:50Z

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

Collectives™ on Stack Overflow

Including an Angular2 application to Asp.Net Webforms Page

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related