Угловой документ и окно undefined

Я использую точечное ядро с angular 4 и конфигурацией webpack.

Когда я пытаюсь получить окно или документ в компоненте или службе, я получаю эту ошибку:

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)

Ответ 1

Если вы используете рендеринг на стороне сервера, вы должны удалить весь код с помощью window или document, который выполняется в node, потому что node не имеет этих переменных (node имеет только global).

Если вы все еще хотите использовать window или document в node env, вы можете попробовать использовать jsdom (https://github.com/tmpvar/jsdom).

Ответ 2

Если вы хотите быстро исправить: поместите этот код в начало вашего файла typescript:

 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
    }
],

Таким образом вы можете переопределить окно и документ в своих тестах и где-нибудь еще.

Ответ 3

Ну, я использую приложение angular 4 и вставляю объект окна, используя:

В компоненте constructor( @Inject('Window') private window: Window) { }

и в модуле: providers: [{ provide: 'Window', useValue: window }]

а затем в компонентной функции я он использовал: this.window

Ответ 4

На стороне сервера JavaScript работает в Node среде, которая не имеет окна или объекта документа. Объект Window и Document работает, когда ваш javascript-код выполняется в среде браузера. Поэтому убедитесь, что код на стороне окна или документа не выполняется на стороне сервера.

Вы можете использовать node-jsdom (https://www.npmjs.com/package/node-jsdom), если вам действительно нужно использовать объект window или document. Просто установите

$ npm install node-jsdom

Здесь (https://github.com/darrylwest/node-jsdom) вы получит помощь по node -jsdom

Ответ 5

оберните свой код, который зависит от окна, как показано ниже

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

Ответ 6

Если вы хотите использовать AOT, используйте инъекцию зависимостей для монтирования окна в свои компоненты. Короче говоря, напишите службу, которая может предоставить объект окна:

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

function getWindow (): any {
    return window;
}

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

Подробнее здесь.

Ответ 7

Поместите свое окно. связанный код внутри функции компонентаDidMount.