Angular2 in ASP.NET - Window is not defined

Question

I'm decently new to Angular2 and very new to incorporating it into an ASP.NET Web Application. I got this error when I tried to build in debug mode in my Angular2 ASP.NET web application. I got the same error when building in release mode.

Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[0] An unhandled exception has occurred while executing the request Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined at D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\vendor.js:89981:21 at Object.<anonymous> (D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\vendor.js:90732:3) at Object.<anonymous> (D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\vendor.js:90734:30) at __webpack_require__ (D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\vendor.js:21:30) at Object.<anonymous> (D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\vendor.js:85385:1) at Object.<anonymous> (D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\vendor.js:85386:30) at __webpack_require__ (D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\vendor.js:21:30) at Object.<anonymous> (D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\main-server.js:20466:42) at __webpack_require__ (D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\main-server.js:20:30) at Object.exports.REPLACEMENT_CHARACTER (D:\Projects\BryterOpsAdmin\BryterOpsAdmin\ClientApp\dist\main-server.js:398:79) Current directory is: D:\Projects\BryterOpsAdmin\BryterOpsAdmin

I had just made some insignificant changes to a model class on the mvc side, so when I got this error I reverted my changes and tried again. I still received this error. According to my source control, there have been absolutely no changes since the last time it was working properly. What can be causing this error? I'm completely stumped as to what to even try to look for.

I searched StackOverflow for anything related but I didn't find anything that applied to asp.net other than this question: Prerendering failed because of error: ReferenceError: window is not defined which was never answered.

I tried deleting the hidden obj and bin folders to no avail.

Thank you in advance.

UPDATE: I tried navigating directly to a page on my site, which it did so successfully. It seems that Angular2 is not longer automatically routing. I'm still hitting the Home Controller and Home Index.cshtml view through MVC ('Home/Index'), so this seems like an Angular2 issue.

This is what my angular2 routing looks like.

`

RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'counter', component: CounterComponent },
            { path: 'fetch-data', component: FetchDataComponent },
            { path: 'bryterUsers', component: BryterUsersComponent },
            { path: 'adminUsers', component: AdminUsersComponent },
            { path: 'retailers', component: RetailersComponent },
            { path: 'providers', component: ProvidersComponent },
            { path: '**', redirectTo: 'home' }
        ])`

UPDATE2: I now can no longer navigate to any other pages. I get the 'window is not defined' error wherever I go. I have changed nothing in my code. I'm completely stumped. Any help would be greatly appreciated.

Techgeekster · Accepted Answer · 2017-09-06 05:34:13Z

3

I found an answer here, although I don't know if it is the correct answer:

Prerendering failed because of error: ReferenceError: Event is not defined with PrimeNG AutoComplete

Here is what they did:

"I was able to solve this by changing the asp-prerender tag in Index.cshtml page that is generated by ASP.Net Core Templates.I missed the point about ASP.Net Core templates from my question.

I changed the tag from

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

to

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

This fixed my problem, but I don't know if this is best practice.

answered Sep 6, 2017 at 5:34

Techgeekster

891 silver badge13 bronze badges

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

1 Comment

Ahmad Over a year ago

Not really a solution but a hack. This disables server side rendering.

Ahmad · Accepted Answer · 2017-11-06 09:56:12Z

3

This error is caused when you are adding something to app.module.shared.ts that is dependent on window variable that is only available in Browser not on Server. Its difficult to figure out with Hit n Trial whats causing this issue but for now that the only solution.

Find that that thing and move it to app.module.browser.ts.

The solution by @techgeekster will work but I would disable server side rendering.

Reference: GitHub Issue

answered Nov 6, 2017 at 9:56

Ahmad

2,7274 gold badges24 silver badges28 bronze badges

Comments

Alexander · Accepted Answer · 2017-11-21 14:07:09Z

0

In my case it was using window.location.origin while prerendering on server-side.

Look for any usage of window.location.origin and check that it is only used on client

answered Nov 21, 2017 at 14:07

Alexander

3154 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular2 in ASP.NET - Window is not defined

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related