web-dev-qa-db-fra.com

document angular4 et la fenêtre ne sont pas définis

J'utilise un noyau de points nets avec 4 angular et une configuration de webpack.

Lorsque j'essaie d'obtenir la fenêtre ou le document dans un composant ou un service, le message d'erreur suivant s'affiche:

ReferenceError: le document n'est pas défini 

ReferenceError: la fenêtre n'est pas définie

Voici les erreurs que je reçois:

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)

Je suis encore nouveau sur le WebPack, tout le monde sait comment résoudre ce problème? J'ai besoin de la fenêtre pour gérer le redimensionnement d'une fenêtre.

MODIFIER...

J'ai réussi à résoudre ce problème en supprimant le rendu préalable du fichier index.cshtml 

je l'ai changé de ceci:

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

pour ça:

<app>Loading...</app>

mais maintenant, évidemment, le rendu préalable côté serveur ne se produira plus:/cela ralentira donc le temps de démarrage de l'application, des idées pour résoudre ce problème sans perdre le rendu préalable côté serveur?

javascriptangularwebpack.net-core
15
fattikus

Si vous utilisez le rendu côté serveur, vous devez supprimer tout le code à l'aide de window ou document qui s'exécute dans un noeud car le noeud ne contient pas ces variables (le noeud ne contient que global).

Si vous souhaitez toujours utiliser window ou document dans le noeud env, vous pouvez essayer d'utiliser jsdom ( https://github.com/tmpvar/jsdom ).

8
Anh Nguyen

Si vous souhaitez utiliser AOT, utilisez l'injection de dépendance pour monter la fenêtre dans vos composants. En bref, écrivez un service qui peut fournir l’objet window:

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

function getWindow (): any {
    return window;
}

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

Plus d'informations ici .

4
Gökhan Kurt

J'utilise l'application angulaire 4 et injecte l'objet window à l'aide de:

Dans le composant constructor( @Inject('Window') private window: Window) { }

et dans le module: providers: [{ provide: 'Window', useValue: window }]

puis dans la fonction composant, je l'ai utilisé comme: this.window

3
Touqeer Shafi

Dans Server Side, JavaScript s'exécute dans l'environnement de nœud sans objet window ou document. L'objet Window & Document fonctionne lorsque votre code javascript s'exécute dans l'environnement du navigateur. Assurez-vous donc que le code associé à la fenêtre ou à l’objet de document ne s’exécute pas côté serveur.

Vous pouvez utiliser node-jsdom ( https://www.npmjs.com/package/node-jsdom ) si vous avez vraiment besoin d'utiliser un objet window ou document. Il suffit d'installer 

$ npm install node-jsdom

Here ( https://github.com/darrylwest/node-jsdom ) vous obtiendrez de l'aide sur node-jsdom

3
Rabbani

Si vous voulez une solution rapide: Mettez ce code en haut de votre fichier TypeScript: 

 declare var window;
 declare var document;

Mais si vous voulez le faire correctement: 

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

dans votre module: 

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

De cette façon, vous pouvez remplacer la fenêtre et la documentation dans vos tests et ailleurs.

3
Milad

envelopper votre code qui dépend de la fenêtre comme ci-dessous

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

Placez votre fenêtre. code associé à l'intérieur de la fonction composantDidMount. 

1
user8335505

Dans Index.html ou Index.cshtml

Changer de 

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

À

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

Si vous utilisez angular4 dans aspnetcore, cela devrait fonctionner correctement 

0
Mark Macneil Bikeio