"window is not defined" when overwriting window dependent providers in AppServerModule

[magnattic]

Bug Report

What is the expected behavior?

I have providers in my AppModule that access window. When I overwrite those providers in the AppServerModule, I expect that there will be no errors during npm run serve:ssr.

What is the current behavior?

This worked in the past version, but does not work anymore in Angular 9. The following errors occurs when I build and run the code as seen below.

ReferenceError: window is not defined at Object.ZAI4 (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:1296223) at webpack_require (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:295) at Object.24aS (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:675605) at webpack_require (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:295) at Object.K011 (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:1131614) at webpack_require (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:295) at Object.uj+Y (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:2278765) at webpack_require (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:295) at Object.0 (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:2962) at __webpack_require__ (/home/dominik-linux/code/play/ng9-ssr/dist/ng9-ssr/server/main.js:1:295)

The error shows that window is being accessed in the AppModule providers, although I have overwritten those providers. So I would expect that the providers should not be called.

What modules are related to this issue?

- [ ] aspnetcore-engine
- [ ] common
- [ ] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

Minimal reproduction with instructions:

npm i -g @angular/cli@next

ng new ng9-ssr && cd ng9-ssr ng add @nguniversal/express-engine@next --clientProject ng9-ssr

Add the following code:

local-storage.ts

import { InjectionToken } from '@angular/core';

export const LOCAL_STORAGE = new InjectionToken<Storage>('localStorage');

app-module.ts

[..]
  providers: [{ provide: LOCAL_STORAGE, useValue: window.localStorage }],
[..]

app-server-module.ts

const fakeStorage: Storage = {
  length: 0,
  clear: () => {},
  getItem: (_key: string) => null,
  key: (_index: number) => null,
  removeItem: (_key: string) => {},
  setItem: (_key: string, _data: string) => {}
};

[..]
  providers: [{ provide: LOCAL_STORAGE, useValue: fakeStorage }],
[..]

npm run build:ssr npm run serve:ssr

What is the use-case or motivation for changing an existing behavior?

I want to write consistent code in both browser and SSR when accessing stuff like LocalStorage or window without using if/else.

Environment:

@nguniversal versions

• common: 9.0.0-next.5
• express-engine: 9.0.0-next.5

  
  Angular CLI: 9.0.0-next.11
  Node: 11.14.0
  OS: linux x64
  Angular: 9.0.0-next.11
  ... animations, cli, common, compiler, compiler-cli, core, forms
  ... language-service, platform-browser, platform-browser-dynamic
  ... platform-server, router

Package Version

@angular-devkit/architect 0.900.0-next.11 @angular-devkit/build-angular 0.900.0-next.11 @angular-devkit/build-optimizer 0.900.0-next.11 @angular-devkit/build-webpack 0.900.0-next.11 @angular-devkit/core 9.0.0-next.11 @angular-devkit/schematics 9.0.0-next.11 @ngtools/webpack 9.0.0-next.11 @nguniversal/common 9.0.0-next.5 @nguniversal/express-engine 9.0.0-next.5 @schematics/angular 9.0.0-next.11 @schematics/update 0.900.0-next.11 rxjs 6.5.3 typescript 3.5.3 webpack 4.41.1

#### Is there anything else we should know?

[alan-agius4]

The above code should have always thrown an exception since you are using a "variable" which doesn't exists, irreverent if the provider is overridden or not since you are referencing a variable which doesn't exist and hence it will throw an exception during the parsing phase.

There are three ways how you can make this work; 1) You can define a global window mock. Example in your server.ts you have global['window'] = {}; 2) Instead of useValue use useFactory and wrap the variable in an arrow function Ex:

{ provide: LOCAL_STORAGE, useFactory: () => window.localStorage }

3) Verify that the window exists

{ provide: LOCAL_STORAGE, useValue: typeof window !== 'undefined' && window.localStorage }

[magnattic]

Thanks, I landed on the useFactory solution.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}