CODEWITHSUNDEEP
angularasp.net-core-mvc
Techgeekster
Techgeekster

Reputation: 89

Angular2 in ASP.NET - Window is not defined

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.

Upvotes: 2

Views: 2762

Answers (3)

Alexander
Alexander

Reputation: 315

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

Upvotes: 0

Ahmad
Ahmad

Reputation: 2707

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

Upvotes: 3

Techgeekster
Techgeekster

Reputation: 89

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.

Upvotes: 3

Related Questions