ReferenceError: окно не определено с Angular Universal - PullRequest
Новая
       19

ReferenceError: окно не определено с Angular Universal

0 голосов
/ 29 марта 2019

Эта проблема возникает в Angular 7. Я обновил приложение с углового 6 до углового 7

Получение этой ошибки: 

 var user_id = window.localStorage.getItem('user_id');
              ^

ReferenceError: window is not defined
    at Object../src/app/global_variable.ts (D:\Project\public\dist\server.js:208477:15)
    at __webpack_require__ (D:\Project\public\dist\server.js:169701:30)
    at Object../src/app/services/auth.service.ts

Ответы [ 3 ]

0 голосов
/ 29 марта 2019

Универсальный инструментарий отображает код на стороне сервера, а объект окна доступен только в браузерах, поэтому вы получаете эту ошибку.

Вы можете добавить условие для выполнения кода на стороне клиента только в браузере с помощью модуля isPlatformBrowser. 

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core'; // add PLATFORM_ID
import { isPlatformBrowser } from '@angular/common'; //add this

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {

   constructor(@Inject(PLATFORM_ID) private platformId: Object) {  }

   ngOnInit() {

     // Client only code.
     if (isPlatformBrowser(this.platformId)) {
        // write your client side code here
     }

   }
 }
0 голосов
/ 29 марта 2019

Когда вы добавляете angular universal в ваше приложение window, document, navigator и другие типы браузеров - не существует на сервере - поэтому их используют или любая библиотека, которая их использует (например, jQuery) не будет работать.

Если вам нужно их использовать, подумайте об ограничении их только вашим клиентом и оборачивании их ситуативно. Вы можете использовать объект, введенный с помощью токена PLATFORM_ID, чтобы проверить, является ли текущая платформа браузером или сервером.

в моем проекте у меня есть следующий код внутри компонента ts file, и он работает 

import { WINDOW } from '@ng-toolkit/universal';
import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';


@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
 })

  export class AppComponent {
  title = 'app';

  constructor(@Inject(WINDOW) public window: Window,
    @Inject(PLATFORM_ID) private platformId: Object) {
  }

  onActivate(event) {
    if (isPlatformBrowser(this.platformId)) {
      this.window.scroll(0, 0);  // window object used which is Instance of Window 

    }
  }

 }
0 голосов
/ 29 марта 2019

«окно» - это глобальный объект в Javascript, поэтому вы можете опустить его, если нет шансов на конфликт. Попробуйте использовать это, 

var user_id = localStorage.getItem('user_id');
...