ReferenceError: window is not defined in angular universal

Question

I am trying to use @nguniversal/express-engine and I have installed and trying to run it but its giving error in main.js file.

This is the error I am getting

    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

I have tried many thing but nothing working.

print function causing the issue and the print function is been used by print-js library

 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

because some object like localstorage, window use in client side are not defined in server side you must first check your browser platform is ready then work with these objectes for this you can do like:

at first generate check-is-browserService.service.ts like this:

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

then generate service for example 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;
  }
}

and when in your component use window.innerwidth you must change it to

x.component.ts:

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