ReferenceError:窗口未在角度通用中定义

Question

我正在尝试使用@nguniversal/express-engine，我已经安装并尝试运行它，但在main.js文件中出现错误。

这是我得到的错误

C:Folderssrdistssrservermain.js:179450
})(window, function() {
^
ReferenceError: window is not defined
at Object.rdXg (C:Folderssrdistssrservermain.js:179450:4)
at __webpack_require__ (C:Folderssrdistssrservermain.js:26:30)
at Module.+PDj (C:Folderssrdistssrservermain.js:133:66)
at __webpack_require__ (C:Folderssrdistssrservermain.js:26:30)
at Module.xCqK (C:Folderssrdistssrservermain.js:198481:92)
at __webpack_require__ (C:Folderssrdistssrservermain.js:26:30)
at Module.xLoe (C:Folderssrdistssrservermain.js:200042:86)
at __webpack_require__ (C:Folderssrdistssrservermain.js:26:30)
at Module.Mm/0 (C:Folderssrdistssrservermain.js:89135:105)
at __webpack_require__ (C:Folderssrdistssrservermain.js:26:30)
A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:59195

我试过很多东西，但都没用。

导致问题的print函数，print js库已使用该打印函数

const contentToConvert = document.getElementById('content');
this.selectedFunctionCode = htmlToImage.toPng;
const debugBase64 = this.debugBase64;
this.selectedFunctionCode(contentToConvert)
.then((dataUrl) => {
print(dataUrl, 'image');
})
.catch((error) => {
console.error('oops, something went wrong!', error);
});

Answer 1

因为客户端中的一些对象(如localstorage、窗口使用(没有在服务器端定义，所以您必须首先检查浏览器平台是否准备好，然后使用这些对象为此，你可以这样做：

首先生成check-is-browserServices.service.ts，如下所示：

export class CheckIsBrowserService {
private isBrowser = new BehaviorSubject<boolean>(null);
constructor() {}
getIsBrowser(): Observable<any> {
return this.isBrowser;
}
setIsBrowser(value: any) {
this.isBrowser.next(value);
}
}

app.component.ts

constructor(
@Inject(PLATFORM_ID) private platformId: any, 
private checkIsBrowserService: CheckIsBrowserService
){
this.checkIsBrowserService.setIsBrowser(isPlatformBrowser(platformId));
}

然后生成服务，例如window.service.ts

class Window implements Window {
readonly innerWidth: number;
}
@Injectable({
providedIn: 'root',
})
export class WindowService {
private config: Window;
constructor(private checkIsBrowserService: CheckIsBrowserService) {
this.config = new Window();
this.checkIsBrowserService.getIsBrowser().subscribe((isBrowser) => {
if (isBrowser) {
this.config = window;
}
});
}
innerWidth() {
return this.config.innerWidth;
}
}

在组件中使用window.inerwidth时，必须将其更改为

x.component.ts:

constructor(private window: WindowService) {
if (this.window.innerWidth() <= 1024) {
//your code
}
}