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

chech this https://stackoverflow.com/questions/56922178/angular-7-universal-referenceerror-window-is-not-defined — mr. pc_coder, Dec 30 '20 at 08:02
thats not it in above suggestion the error is coming in server.js file but in my case its in main.js — Samshad Alam, Dec 30 '20 at 08:06

score 1 · Answer 1 · answered Dec 30 '20 at 08:17

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

still getting the same error after doing all changes. would @HostListener('window:resize', ['$event']) this also be need to be in condition — Samshad Alam, Dec 30 '20 at 11:32
are you sure do all changes ? because i test it know and work fine with @HostListener('window:resize', ['$event']). no this condition is only for test if you want use window.innerWidth and at the end if is ok for you can you share your code — mehranmb78, Dec 30 '20 at 19:21

ReferenceError: window is not defined in angular universal

1 Answers1