0

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

这是我得到的错误

    C:\Folder\ssr\dist\ssr\server\main.js:179450
})(window, function() {
   ^

ReferenceError: window is not defined
    at Object.rdXg (C:\Folder\ssr\dist\ssr\server\main.js:179450:4)
    at __webpack_require__ (C:\Folder\ssr\dist\ssr\server\main.js:26:30)
    at Module.+PDj (C:\Folder\ssr\dist\ssr\server\main.js:133:66)
    at __webpack_require__ (C:\Folder\ssr\dist\ssr\server\main.js:26:30)
    at Module.xCqK (C:\Folder\ssr\dist\ssr\server\main.js:198481:92)
    at __webpack_require__ (C:\Folder\ssr\dist\ssr\server\main.js:26:30)
    at Module.xLoe (C:\Folder\ssr\dist\ssr\server\main.js:200042:86)
    at __webpack_require__ (C:\Folder\ssr\dist\ssr\server\main.js:26:30)
    at Module.Mm/0 (C:\Folder\ssr\dist\ssr\server\main.js:89135:105)
    at __webpack_require__ (C:\Folder\ssr\dist\ssr\server\main.js:26:30)

A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:59195

我尝试了很多东西，但没有任何效果。

导致问题的 print 函数，print-js 库使用了 print 函数

 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);
  });
4

1 回答 1

1

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

首先生成 check-is-browserService.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.innerwidth 时，您必须将其更改为

x.component.ts：

 constructor(private window: WindowService) {
   if (this.window.innerWidth() <= 1024) {
     //your code
   }
 }
于 2020-12-30T08:17:04.973 回答