Блог

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

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

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

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

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

Вы можете добавить условие для выполнения кода на стороне клиента только в браузере с помощью 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
     }

   }
 }
  

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

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

Когда вы добавляете 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 

    }
  }

 }