Zone related error when having multiple Angular Apps within an ASP.net MVC Core application #783

New Issue

fergalmoran · 2025-08-09T17:17:39Z

fergalmoran commented

2025-08-09 17:17:39 +00:00

Originally created by @jagmagh on 5/4/2017

I am creating a new application with ASP.net core and Angular 2 using JavascriptServices as a starting point.

I am trying to structure the application into having multiple smaller "Angular 2 Apps" within the overall ASP.net MVC application. I have different views in my asp.net mvc that will be displayed to the user based on their access and each view will have one of these smaller "Angular 2 App" loaded into it.

Just to see if that is feasible, i duplicated the existing sample "ClientApp" from JavascriptServices scaffolding and created 2 different views that deliver each of these apps.

app1.html

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/client1.js" asp-append-version="true"></script>
}

app2.html

<app2 asp-prerender-module="ClientApp2/dist/main-server">Loading...</app2>
@section scripts {
    <script src="~/dist/client2.js" asp-append-version="true"></script>
}

When i run the application, when i go to each view the first time e.g /app1 and /app2, both the applications load up just fine. However, the moment I navigate back from /app2 to /app1, I get the following error

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: 
Prerendering failed because of error: Error: Zone already loaded.

at new Error (native)
at C:\Users\Projects\Sample\ClientApp\dist\vendor.js:73874:15 [<root>]
at C:\Users\Projects\Sample\ClientApp\dist\vendor.js:75020:3 [<root>]
at module.exports.NO_ZONE.name (C:\Users\Projects\Sample\ClientApp\dist\vendor.js:73859:10) [<root>]
at Object.module.exports.webpackEmptyContext.keys (C:\Users\Projects\Sample\ClientApp\dist\vendor.js:73862:2) [<root>]

This error is sourced at vendor.js which in JavascriptServices structure is the file that contains the core framework i.e Angular itself. It seems this is because of the server side pre-rendering that is a feature of JavascriptServices but I am not sure exactly why - maybe because I am quite new to Angular 2 / JavascriptServices and am not exactly sure what is going on.

Do I or can I disable the Server Side Rendering in JavascriptServices? Currently, if i try to remove the asp-prerender-module="ClientApp/dist/main-server from my app, it doesnt load at all. All i see is the "Loading..." message from the initial html.

I am not exactly sure if opening an issue in this repo for what is more likely to be a problem with my understanding rather than anything to do with JavascriptServices is the right way and i apologise in advance for any faux pas but I wasnt having much luck on SO and I am hoping maybe someone here will point me in the right direction.

*Originally created by @jagmagh on 5/4/2017* I am creating a new application with ASP.net core and Angular 2 using JavascriptServices as a starting point. I am trying to structure the application into having multiple smaller "Angular 2 Apps" within the overall ASP.net MVC application. I have different views in my asp.net mvc that will be displayed to the user based on their access and each view will have one of these smaller "Angular 2 App" loaded into it. Just to see if that is feasible, i duplicated the existing sample "ClientApp" from JavascriptServices scaffolding and created 2 different views that deliver each of these apps. app1.html ``` <app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> <script src="~/dist/vendor.js" asp-append-version="true"></script> @section scripts { <script src="~/dist/client1.js" asp-append-version="true"></script> } ``` app2.html ``` <app2 asp-prerender-module="ClientApp2/dist/main-server">Loading...</app2> @section scripts { <script src="~/dist/client2.js" asp-append-version="true"></script> } ``` When i run the application, when i go to each view the first time e.g /app1 and /app2, both the applications load up just fine. However, the moment I navigate back from /app2 to /app1, I get the following error ``` An unhandled exception occurred while processing the request. Exception: Call to Node module failed with error: Prerendering failed because of error: Error: Zone already loaded. at new Error (native) at C:\Users\Projects\Sample\ClientApp\dist\vendor.js:73874:15 [<root>] at C:\Users\Projects\Sample\ClientApp\dist\vendor.js:75020:3 [<root>] at module.exports.NO_ZONE.name (C:\Users\Projects\Sample\ClientApp\dist\vendor.js:73859:10) [<root>] at Object.module.exports.webpackEmptyContext.keys (C:\Users\Projects\Sample\ClientApp\dist\vendor.js:73862:2) [<root>] ``` This error is sourced at vendor.js which in JavascriptServices structure is the file that contains the core framework i.e Angular itself. It seems this is because of the server side pre-rendering that is a feature of JavascriptServices but I am not sure exactly why - maybe because I am quite new to Angular 2 / JavascriptServices and am not exactly sure what is going on. Do I or can I disable the Server Side Rendering in JavascriptServices? Currently, if i try to remove the `asp-prerender-module="ClientApp/dist/main-server` from my app, it doesnt load at all. All i see is the "Loading..." message from the initial html. I am not exactly sure if opening an issue in this repo for what is more likely to be a problem with my understanding rather than anything to do with JavascriptServices is the right way and i apologise in advance for any faux pas but I wasnt having much luck on SO and I am hoping maybe someone here will point me in the right direction.

fergalmoran closed this issue

2025-08-09 17:17:39 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#783