"Window is not defined" even when isPlatformBrowser used.

[jasonburrows]

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine
• module-map-ngfactory-loader

Is this a regression?

Yes the project worked correctly in all circumstances in Angular 8.1.1

Description

Large Angular 8 application with SSR support. Upgraded to Angular 9. All migration scripts related to my project ran and worked correctly with no errors.

Project works fine with ng serve and builds fine when targeting SSR with the command:
NODE_OPTIONS=--max-old-space-size=8192 ng build --source-map --configuration=development && ng run front:server:development.

When I try to run the resulting server (to host with express / express-engine) it gives the "Window not defined" because of a reference in a third party module. All uses of that module are guarded with an 'isPlatformBrowser' check.

🔬 Minimal Reproduction

Seemingly you just have to include any module that references 3rd party modules that try to access 'window'. Note that this did not cause any problem in Angular 8 as long as you guarded against use of those modules with 'isPlatformBrowser' checks.

Now it seems merely having the module referenced is enough.

Set up a vanilla universal app and then add any angular module that references any non-angular JS module that makes a call to window. Note that this will cause the problem even if the angular module is correctly using isPlatformBrowser.

https://github.com/jasonburrows/angularUniversal1675.git

🔥 Exception or Error

> front@2.30.0 servedev:ssr /Users/me/Development/front
> NODE_ENV=dev node dist/server/main

/Users/me/Development/front/dist/server/main.js:200603
}( window, function factory( Outlayer, getSize ) {
   ^

ReferenceError: window is not defined
    at Object../node_modules/masonry-layout/masonry.js (/Users/me/Development/front/dist/server/main.js:200603:4)
    at __webpack_require__ (/Users/me/Development/front/dist/server/main.js:20:30)
    at Module../node_modules/ngx-masonry/__ivy_ngcc__/fesm2015/ngx-masonry.js (/Users/me/Development/front/dist/server/main.js:225304:72)
    at __webpack_require__ (/Users/me/Development/front/dist/server/main.js:20:30)
    at Object../src/modules/core/core.module.ts (/Users/me/Development/front/dist/server/main.js:286092:23)
    at __webpack_require__ (/Users/me/Development/front/dist/server/main.js:20:30)
    at Object../src/app/app.module.ts (/Users/me/Development/front/dist/server/main.js:276737:23)
    at __webpack_require__ (/Users/me/Development/front/dist/server/main.js:20:30)
    at Object../src/app/app.server.module.ts (/Users/me/Development/front/dist/server/main.js:276890:22)
    at __webpack_require__ (/Users/me/Development/front/dist/server/main.js:20:30)
    at Object../src/main.server.ts (/Users/me/Development/front/dist/server/main.js:277166:27)
    at __webpack_require__ (/Users/me/Development/front/dist/server/main.js:20:30)
    at Object../server.ts (/Users/me/Development/front/dist/server/main.js:276464:23)
    at __webpack_require__ (/Users/me/Development/front/dist/server/main.js:20:30)
    at Object.0 (/Users/me/Development/front/dist/server/main.js:354592:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! front@2.30.0 servedev:ssr: `NODE_ENV=dev node dist/server/main`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the front@2.30.0 servedev:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/me/.npm/_logs/2020-05-11T15_57_49_863Z-debug.log

🌍 Your Environment

  ng:analytics getGlobalAnalytics +0ms
  ng:analytics Client Analytics config found: false +26ms
  ng:analytics Analytics disabled. Ignoring all analytics. +1ms
  ng:analytics getSharedAnalytics +0ms

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.5
Node: 12.16.2
OS: darwin x64

Angular: 9.1.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.5
@angular-devkit/build-angular     0.901.5
@angular-devkit/build-optimizer   0.901.5
@angular-devkit/build-webpack     0.901.5
@angular-devkit/core              9.1.5
@angular-devkit/schematics        9.1.5
@angular/cdk                      9.2.3
@angular/cli                      9.1.5
@angular/material                 9.2.3
@ngtools/webpack                  9.1.5
@nguniversal/builders             9.1.0
@nguniversal/common               9.1.0
@nguniversal/express-engine       9.1.0
@schematics/angular               9.1.5
@schematics/update                0.901.5
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

[jasonburrows]

OK - further experimentation.

If you have your own module that you are loading into an angular-universal (9) project and that module references a third party angular module, which in turn references a non-angular module that expects browser features, you will get errors about trying to access those features.

Here are two example npm modules that cause this issue:
ngx-masonry (references masonry.js which expects 'window')
ng2-pdf-viewer (references pdfs-dist which expects 'window')

It doesn't matter if you even use the contents of those modules - merely importing them into one of your local modules will cause the server to throw errors as soon as your local module is first encountered server side (even if lazily loaded).

...so isPlatformBrowser can't help.

So what do we do in these situations? I'm only using browser features in the browser but merely including these modules breaks SSR.

[jasonburrows]

If you use this:

const template = fs.readFileSync(join(DIST_FOLDER, INDEX_HTML)).toString();
const win = domino.createWindow(template);

global['window']= win;
global['document'] = win.document;
global['navigator'] = win.navigator;
global['Event'] = null;

(note, must appear prior to import { AppServerModule } from './src/main.server';).

This will work in some cases but really just kicks the can down the road.

For example, with our above modules that reference external 'browser only' modules, this solution will get past that error for ngx-masonry, but will still fail with ng2-pdf-viewer because it will try to find the requestAnimationFrame on window, which domino does not provide.

I guess you could just mock your way to freedom but I'd hope there's some way we can avoid faults for importing modules where the offending code isn't even executed.

[jasonburrows]

After speaking with the author of ngx-masonry and taking a look myself, the calls to masonry.js are ALREADY correctly guarded with an isPlatformBrowser check.

So what are we supposed to do in this case? It seems like no matter how you guard against it the error will be thrown for SSR merely by importing the module no matter who's guarding against it.

[CaerusKaru]

I'm inclined to believe one of two things: either it's a change in configuration that @alan-agius4 maybe can speak to, or it's an issue with the Angular CLI since they handle the actual compilation for SSR. I'll leave it to him to follow up.

[Teebo]

@CaerusKaru @jasonburrows hey guys, is there an update on this issue? I have been struggling with it for the past few days

[Teebo]

@alan-agius4 bro...

[jasonburrows]

Nope. Essentially it breaks multi platform support in angular and makes using ‘isPlatformBrowser’ a waste of time that accomplished nothing.

I eventually got past it by literally mocking out every single call that anything I use uses (even had to do it for libs used by libs I use).

Amazing waste of time, total hack, and the fact this totally breaking change hasn’t been even really looked at makes my lose confidence in Angular. I won’t be selecting it for future projects.

[Teebo]

@jasonburrows yeah it is a big pain, thanks anyway

[Teebo]

@jasonburrows hey man would you please give me a hint on how you did the mocking of the window object even for third party libs.
I tried to offset the error by using domino but it seems to be not helping.

[jasonburrows]

Sure - so since part of the problem is that it triggers the error on module load (rather than on use), just make sure all your modules get loaded - like don’t lazy load or if you do, trigger the load of those modules manually in the browser.

This at least means it isn’t that hard to ensure you get all the problems.

Next, I use Domino to provide implementations where it provides them. Finally, you will get errors about further missing functions (or whatever is missing). Make note of the name and then look up the proper signature. Implement it, add it to the object that needs it (“window” for example).

For functions that return real values, I did my best to return values that wouldn’t cause any problems. On the plus side, it doesn’t seem like these functions actually get executed so I doubt what you return matters (but don’t get me wrong, I’m not really comfortable about this part).

Doing all that I’ve had my application up and running with no issues (from what I can tell).

If you get stuck let me know - I ran into a few gotchas along the way but don’t remember them all here.

It wasn’t actually that time consuming as fortunately there were only a few things that I needed to mock, but I’m still not confident about having to have done it at all.

Good luck - let me know how it goes and I’ll try to help if you run into something.

...I’m on my phone right now but if you need it I can post some code to clear it up when I’m back at a workstation.

[Teebo]

@jasonburrows thank you so much.

So maybe you could spot something on my server.ts file regarding the usage of domino.

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');

const domino = require('domino');

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { existsSync, readFileSync } from 'fs';

const distFolder = join(process.cwd(), 'dist/motif/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index.html';
const template = readFileSync(join(distFolder, indexHtml)).toString();
const window = domino.createWindow(template.toString());

global['window'] = window;
global['document'] = window.document;
global['self'] = window
global['IDBIndex'] = window.IDBIndex
global['document'] = window.document
global['navigator'] = window.navigator
global['getComputedStyle'] = window.getComputedStyle;

import 'zone.js/dist/zone-node';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';


// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  const server = express();

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser

  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

Despite having the above configuration, I still get the error as below:

I think this issue is related to #1678 (comment)
But in my case, it is caused by Editor.js.
I have wrapped Editor.js in a component, and in my case, the error is due to an instance creation of Editor.js and not on the import level.