"Window is not defined" even when isPlatformBrowser used.

🐞 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]

So hey @alan-agius4 - any updates on this?

Kinda looks like SSR has been effectively broken for two versions of Angular and its even more broken in 10 than in 9.

What’s the update? This is a pretty core feature of Angular - how is it not getting any attention?

[RomainMarecat]

After an update to Angular 10+

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

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.1001.0
@angular-devkit/build-angular              0.1001.0
@angular-devkit/build-ng-packagr           0.1001.0
@angular-devkit/build-optimizer            0.1001.0
@angular-devkit/build-webpack              0.1001.0
@angular-devkit/core                       10.1.0
@angular-devkit/schematics                 10.1.0
@angular/cdk                               10.2.0
@angular/flex-layout                       10.0.0-beta.32
@angular/material                          10.2.0
@angular/material-moment-adapter           10.2.0
@ngtools/webpack                           10.1.0
@nguniversal/builders                      10.1.0
@nguniversal/common                        10.1.0
@nguniversal/express-engine                10.1.0
@nguniversal/module-map-ngfactory-loader   9.0.0-next.9
@schematics/angular                        10.1.0
@schematics/update                         0.1001.0
ng-packagr                                 10.1.0
rxjs                                       6.5.5
typescript                                 3.9.7
webpack                                    4.44.1

I encountered a regression compared to Angular 9 version On the main.server.ts side, I had defined window via domino (everything was functional in ng9):

global['window'] = win;
global['document'] = win.document;
global['CSS'] = null;
global['XMLHttpRequest'] = xmlhttprequest.XMLHttpRequest;
global['Prism'] = null;
global['HTMLAnchorElement'] = win.HTMLAnchorElement;
global['navigator'] = win.navigator;
global['requestAnimationFrame'] = requestAnimationFrame as unknown as (callback: FrameRequestCallback) => number;
global['cancelAnimationFrame'] = cancelAnimationFrame;
global['Element'] = win.Element;
global['Event'] = win.Event;
global['KeyboardEvent'] = win.KeyboardEvent;

Since the release in angular version 10. The same code no longer works. It seems that global ['window'] is no longer recognized in the main.js suite

ReferenceError: window is not defined because of node_modules / leaflet / dist / leaflet-src.js from ngx-leaflet which does not work in SSR.

I tried to move the redefinition of the global in the server.ts and the main.server.ts but nothing there still makes the same error.

Has there been a change in the consideration of the global between the versions @nguniversal/common": “^9.1.0 and @nguniversal/express-engine”: “^9.1.0 compare to @nguniversal/common”: “^10.1.0” and “@nguniversal/express-engine”: “^10.1.0”

It seems that since 10.1.0 all people can’t build in SSR anymore because of a potential script with window.