ASP.NET 中的 Angular2 - 未定义窗口

Question

我是 Angular2 的新手，并且对于将其整合到 ASP.NET Web 应用程序中非常陌生。 当我尝试在我的 Angular2 ASP.NET Web 应用程序中以调试模式构建时出现此错误。在发布模式下构建时，我遇到了同样的错误。

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

我刚刚在 mvc 端对模型类进行了一些微不足道的更改，所以当我收到此错误时，我恢复了我的更改并再次尝试。 我仍然收到此错误。根据我的源代码管理，自上次正常工作以来绝对没有任何变化。 什么可能导致此错误？我完全不知道要寻找什么。

我在 StackOverflow 上搜索了任何相关内容，但除了这个问题之外，我没有找到任何适用于 asp.net 的内容：Prerendering failed because of error: ReferenceError: window is not defined 从来没有回答过。

我尝试删除隐藏的 obj 和 bin 文件夹无济于事。

提前谢谢你。

更新： 我尝试直接导航到我网站上的一个页面，它成功地做到了。看来Angular2不再自动路由了。我仍然通过 MVC（'Home/Index'）点击 Home Controller 和 Home Index.cshtml 视图，所以这似乎是一个 Angular2 问题。

这就是我的 angular2 路由的样子。

`

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：我现在无法导航到任何其他页面。无论走到哪里，我都会收到“未定义窗口”错误。我的代码中没有任何更改。我完全被难住了。任何帮助将不胜感激。

Answer 1

我在这里找到了答案，虽然不知道是不是正确答案：

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

他们是这样做的：

“我能够通过更改由 ASP.Net Core 模板生成的 Index.cshtml 页面中的 asp-prerender 标记来解决此问题。我在我的问题中错过了关于 ASP.Net Core 模板的要点。

我把标签从

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

到

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

这解决了我的问题，但我不知道这是否是最佳做法。

Answer 2

当您向app.module.shared.ts 添加依赖于window 变量的内容时会导致此错误，该变量仅在浏览器中可用而不在服务器上。很难通过 Hit n Trial 找出导致此问题的原因，但目前这是唯一的解决方案。

找到那个东西并把它移到app.module.browser.ts。

@techgeekster 的解决方案可行，但我会禁用服务器端渲染。

参考：GitHub Issue

Answer 3

在我的例子中，它在服务器端预渲染时使用window.location.origin。

查找window.location.origin 的任何用法并检查它是否仅用于客户端