"window is not defined" when using serverside rendering (Angular Universal)

[fabienne-m]

Summary

When using Inputmask with Angular Universal in ServerSideRendering mode, get a "ReferenceError: window is not defined" upon startup.

Setup

Using the ngneat/input-mask wrapper around Inputmask.

Relevant libraries and versions:

• "@angular/core": "~13.2.2",
• "@nguniversal/builders": "^13.0.2",
• "@ngneat/input-mask": "^5.2.0",
• "inputmask": "5.0.5",

Deployed to AWS Elasticbeanstalk running Node.js 16.

Reproducible locally using the Angular Universal test SSR.

Expected

When using in a client side rendering mode, no errors are shown. It would be expected that the same would happen in a SSR environment (Node.js) however the server fails to start.

Actual

Server side code fails to start, throwing a ReferenceError: window is not defined. I suspect this is because of the outputted webpack code (see below).

Other

Relevant code from dist/inputmask.js:

/*!
 * dist/inputmask
 * https://github.com/RobinHerbots/Inputmask
 * Copyright (c) 2010 - 2020 Robin Herbots
 * Licensed under the MIT license
 * Version: 5.0.5-beta.0
 */
!function webpackUniversalModuleDefinition(root, factory) {
    if (true) module.exports = factory(); else { var i, a; }
}(window, function() {
  ^ 
ReferenceError: window is not defined

[felipein]

@fabienne-m any progress on this?

[fabienne-m]

Unfortunately, not that I know of.

[felipein]

my observation is that inputmask is being built and placed in the main.js bundle. Because its code referes self/window it doesnt pass over the :SSR compiler. Neither route i'm using inputmask needs to be served over SSR so i'm trying to find a way by pass this code check that stops when self/window happens. Something like configuring the routes that will be served as SSR on the server.ts