Question

我使用dot net core with angular 4和webpack config。

当我试图在组件或服务中获取窗口或文档时，我收到此错误：

ReferenceError：未定义文档

ReferenceError：未定义窗口

以下是我遇到的错误：

Microsoft.AspNetCore.NodeServices[0]
      ERROR { ReferenceError: window is not defined
          at _window (C:\gitRepose\AngularCore\FM\FMWebApp\FootballWebApp\ClientApp\dist\main-server.js:30801:12)

Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0]
      An unhandled exception has occurred: window is not defined
      ReferenceError: window is not defined
    at _window (C:\gitRepose\AngularCore\FM\FMWebApp\FootballWebApp\ClientApp\dist\main-server.js:30801:12)

我还是网络包的新手，有谁知道我怎么解决这个问题？当窗口调整大小时，我需要窗口来处理。

编辑...

我设法通过从index.cshtml

中删除预渲染来解决这个问题

我改变了这个：

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

到此：

<app>Loading...</app>

但现在很明显，服务器端的预渲染不会发生：/因此它会减慢应用程序启动时间，任何想法如何解决这个问题而不会丢失服务器端预渲染？

Answer 1

如果您正在使用服务器端呈现，则应使用在节点中运行的window或document删除所有代码，因为节点没有这些变量（节点只有global）。

如果您仍想在节点env中使用window或document，则可以尝试使用jsdom（SQL fiddle）。

Answer 2

如果要使用AOT，请使用依赖注入将窗口装入组件。简而言之，编写一个可以提供窗口对象的服务：

import { Injectable } from '@angular/core';

function getWindow (): any {
    return window;
}

@Injectable()
export class WindowRefService {
    get nativeWindow (): any {
        return getWindow();
    }
}

更多信息here。

Answer 3

我正在使用角度4应用程序并使用以下方法注入窗口对象：

在组件constructor( @Inject('Window') private window: Window) { }

中

和In模块：providers: [{ provide: 'Window', useValue: window }]

然后在组件函数中我使用它：this.window

Answer 4

如果您想要快速修复：将此代码放在打字稿文件的顶部：

 declare var window;
 declare var document;

但如果你想做得好：

 import { DOCUMENT } from '@angular/platform-browser';
 export const WINDOW           = new InjectionToken( 'WINDOW' );

 @Component()
 export class YourComponent{
          constructor(
              @Inject( WINDOW ) private window,
              @Inject( DOCUMENT ) private document){}

在你的模块中：

providers       : [
    {
        provide  : WINDOW,
        useValue : window
    }
],

这样您就可以在测试和其他任何地方覆盖窗口和文档。

Answer 5

在服务器端JavaScript在节点环境中运行，该环境没有窗口或文档对象。窗口＆amp;当您的JavaScript代码在浏览器环境中执行时，Document对象可以正常工作因此，请确保窗口或文档对象相关代码不在服务器端执行

如果您确实需要使用窗口或文档对象，则可以使用node-jsdom（https://www.npmjs.com/package/node-jsdom）。只需安装

$ npm install node-jsdom

Here（https://github.com/darrylwest/node-jsdom）您将获得node-jsdom

的帮助

Answer 6

包装你的代码，这取决于下面的窗口

if (typeof window !== 'undefined') {
    // your client-only logic here like below
    alert(window.innerWidth);
}

Answer 7

放置你的窗户。 componentDidMount函数中的相关代码。

Answer 8

在 Index.html 或 Index.cshtml

中

从

更改

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

要

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

如果你在aspnetcore中使用angular4，它应该可以正常工作

angular4文档和窗口未定义

8 个答案: