ReferenceError：未定义窗口 Angular Universal答案

【问题标题】：ReferenceError: window is not defined Angular UniversalReferenceError：未定义窗口 Angular Universal
【发布时间】：2020-11-12 19:52:08
【问题描述】：

我正在使用 Angular 10 并尝试在我的项目中实现 SSR。

当我运行 npm run serve:ssr 时，出现以下错误

ReferenceError: window is not defined

当我用谷歌搜索时，他们建议添加domino

所以下面是我的 server.ts

....
const scripts = fs.readFileSync('dist/asfc-web/browser/index.html').toString();

const window = domino.createWindow(scripts);
global['window'] = window;
global['document'] = window.document;

....

仍然出现同样的错误，请指导我如何解决此问题。

【问题讨论】：

尝试确定是哪个依赖项导致了这种情况

标签： node.js angular typescript server-side-rendering angular-universal

【解决方案1】：

这很简单，

我在global['window'] 之后导入了AppServerModule 并且它起作用了

global['window'] = window;
global['document'] = window.document;

import { AppServerModule } from '../../projects/asfc-web/src/main.server';

【讨论】：

你测试了哪个版本的角度？

【解决方案2】：

你可以使用 Renderer2 来监听这个。

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

 constructor(private renderer2: Renderer2) {
     ...
 }

this.renderer2.listen('window', 'load', event => {    
   this.innerWidth = event.currentTarget.innerWidth;
   console.log(this.innerWidth);
});

【讨论】：

【解决方案3】：

您可以创建新服务

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

function _window(): any {
  return window;
}

@Injectable({
  providedIn: 'root'
})
export class WindowRef {
  get nativeWindow(): any {
    return _window();
  }
}

在要使用的构造函数中添加：

  constructor(
    private windowRef: WindowRef
  ) {
  }

并像这样使用：

  this.windowRef.nativeWindow.scrollTo({
    top: 0,
    behavior: 'smooth'
  });

或者您可以查看平台：

  constructor(
    @Inject(PLATFORM_ID) private platformId: any,
    private windowRef: WindowRef
  ) {
  }
if (isPlatformBrowser(this.platformId)) {
  this.windowRef.nativeWindow.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

【讨论】：