Question

此问题发生在Angular 7中。我已将应用程序从Angle 6升级到Angle 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

Answer 1

“窗口”是Javascript中的全局对象，因此如果没有冲突的机会，则可以忽略它。尝试使用它，

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

Answer 2

通用工具包在服务器端呈现代码，并且窗口对象仅在浏览器中可用，这就是您收到此错误的原因。

使用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
     }

   }
 }

Answer 3

当您在应用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 

    }
  }

 }

ReferenceError：窗口未使用Angular Universal定义

3 个答案: