web-dev-qa-db-de.com

dokument und Fenster von angle4 sind nicht definiert

Ich verwende dot net core mit eckig 4 ​​und webpack config.

Wenn ich versuche, das Fenster oder Dokument in einer Komponente oder einem Dienst abzurufen, erhalte ich diese Fehlermeldung:

ReferenceError: Dokument ist nicht definiert 

ReferenceError: Fenster ist nicht definiert

Hier sind die Fehler, die ich erhalte:

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)

Ich bin noch ganz neu im Webpack, weiß jemand, wie ich das beheben kann? Ich brauche das Fenster, wenn ein Fenster seine Größe ändert.

BEARBEITEN...

Ich konnte dieses Problem beheben, indem ich den Pre-Render aus der index.cshtml entfernte 

ich habe es hier geändert:

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

zu diesem:

<app>Loading...</app>

aber jetzt wird offensichtlich kein Pre-Rendering auf Serverseite stattfinden:/Dadurch wird die Startzeit der App verlangsamt. Gibt es Ideen, wie ich das beheben kann, ohne dass das serverseitige Pre-Rendering verloren geht?

15
fattikus

Wenn Sie serverseitiges Rendering verwenden, sollten Sie sämtlichen Code entfernen, der window oder document verwendet, die im Knoten ausgeführt werden, da der Knoten diese Variablen nicht hat (der Knoten hat nur global).

Wenn Sie weiterhin window oder document im Knoten env verwenden möchten, können Sie versuchen, jsdom ( https://github.com/tmpvar/jsdom ) zu verwenden.

8
Anh Nguyen

Wenn Sie AOT verwenden möchten, verwenden Sie die Abhängigkeitseingabe, um ein Fenster in Ihre Komponenten zu laden. Schreiben Sie kurz einen Dienst, der das Fensterobjekt bereitstellen kann:

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

function getWindow (): any {
    return window;
}

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

Weitere Informationen hier .

4
Gökhan Kurt

Nun, ich benutze die Anwendung von angle 4 und injiziere das Fensterobjekt mit

In der Komponente constructor( @Inject('Window') private window: Window) { }

und im Modul: providers: [{ provide: 'Window', useValue: window }]

und dann in der Komponentenfunktion habe ich es benutzt: this.window

3
Touqeer Shafi

Auf der Serverseite wird JavaScript in einer Knotenumgebung ausgeführt, die kein Fenster- oder Dokumentobjekt hat. Das Window & Document-Objekt funktioniert, wenn Ihr JavaScript-Code in der Browser-Umgebung ausgeführt wird. Stellen Sie daher sicher, dass der auf Fenster oder Dokumentobjekte bezogene Code nicht auf dem Server ausgeführt wird

Sie können node-jsdom ( https://www.npmjs.com/package/node-jsdom ) verwenden, wenn Sie Fenster- oder Dokumentobjekte wirklich benötigen. Einfach installieren 

$ npm install node-jsdom 

Hier ( https://github.com/darrylwest/node-jsdom ) erhalten Sie Hilfe zu node-jsdom

3
Rabbani

Wenn Sie eine schnelle Lösung suchen: Fügen Sie diesen Code oben in Ihre TypeScript-Datei ein: 

 declare var window;
 declare var document;

Aber wenn Sie es richtig machen wollen: 

 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){}

in Ihrem Modul: 

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

Auf diese Weise können Sie Fenster und Dokumente in Ihren Tests und an anderen Orten überschreiben.

3
Milad

wickeln Sie Ihren Code ein, der wie unten gezeigt vom Fenster abhängig ist

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

Platziere dein Fenster. zugehöriger Code in der componentDidMount-Funktion 

1
user8335505

In Index.html oder Index.cshtml

Wechsel von 

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

Zu

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

Wenn Sie angle4 in Aspnetcore verwenden, sollte dies einwandfrei funktionieren 

0