@firebase/analytics: "ReferenceError: window is not defined" with SSR (Angular Universal)

[blove]

Version info

Angular CLI: 8.3.21
Node: 10.15.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package Version

@angular-devkit/architect 0.803.21
@angular-devkit/build-angular 0.803.21
@angular-devkit/build-optimizer 0.803.21
@angular-devkit/build-webpack 0.803.21
@angular-devkit/core 8.3.21
@angular-devkit/schematics 8.3.21
@angular/cdk 8.2.3
@angular/cli 8.3.21
@angular/fire 5.3.0
@angular/material 8.2.3
@angular/pwa 0.803.21
@ngtools/webpack 8.3.21
@nguniversal/express-engine 8.2.6
@nguniversal/module-map-ngfactory-loader 8.2.6
@schematics/angular 8.3.21
@schematics/update 0.803.21
rxjs 6.5.4
typescript 3.5.3
webpack 4.39.2

How to reproduce these conditions

This is an issue that seems to only occur with SSR (Angular Universal).
As such, the steps to reproduce involve cloning a sample repository, installing dependencies, building, and then running the node server locally.

Steps to set up and reproduce

1. Clone the repository located at: https://github.com/blove/angularfire-prerender-analytics
2. Run the npm run build command to build the Angular project, server project and webpack.
3. Run the npm run serve:ssr command to start the node server.
4. Open http://localhost:4000 in your browser (or make the request via curl)

Sample data and security rules

N/A

Debug output

Unhandled Promise rejection: window is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: window is not defined
    at findGtagScriptOnPage (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:348:22)
    at factory (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:473:14)
    at Component.instance.INTERNAL.registerComponent.component.Component.setServiceProps.settings [as instanceFactory] (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:535:16)
    at Provider.getOrInitializeService (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/component/dist/index.cjs.js:219:39)
    at Provider.getImmediate (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/component/dist/index.cjs.js:120:33)
    at FirebaseAppImpl._getService (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/app/dist/index.node.cjs.js:227:49)
    at FirebaseAppImpl.firebaseAppImpl.(anonymous function) [as analytics] (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/app/dist/index.node.cjs.js:437:39)
    at MapSubscriber.eval [as project] (webpack://app/./node_modules/@angular/fire/analytics/analytics.js?:129:626)
    at MapSubscriber._next (webpack://app/./node_modules/rxjs/_esm5/internal/operators/map.js?:40:35)
    at MapSubscriber.Subscriber.next (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:63:18) ReferenceError: window is not defined
    at findGtagScriptOnPage (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:348:22)
    at factory (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:473:14)
    at Component.instance.INTERNAL.registerComponent.component.Component.setServiceProps.settings [as instanceFactory] (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:535:16)
    at Provider.getOrInitializeService (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/component/dist/index.cjs.js:219:39)
    at Provider.getImmediate (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/component/dist/index.cjs.js:120:33)
    at FirebaseAppImpl._getService (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/app/dist/index.node.cjs.js:227:49)
    at FirebaseAppImpl.firebaseAppImpl.(anonymous function) [as analytics] (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/app/dist/index.node.cjs.js:437:39)
    at MapSubscriber.eval [as project] (webpack://app/./node_modules/@angular/fire/analytics/analytics.js?:129:626)
    at MapSubscriber._next (webpack://app/./node_modules/rxjs/_esm5/internal/operators/map.js?:40:35)
    at MapSubscriber.Subscriber.next (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:63:18)
Unhandled Promise rejection: window is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: window is not defined
    at findGtagScriptOnPage (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:348:22)
    at factory (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:473:14)
    at Component.instance.INTERNAL.registerComponent.component.Component.setServiceProps.settings [as instanceFactory] (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:535:16)
    at Provider.getOrInitializeService (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/component/dist/index.cjs.js:219:39)
    at Provider.getImmediate (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/component/dist/index.cjs.js:120:33)
    at FirebaseAppImpl._getService (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/app/dist/index.node.cjs.js:227:49)
    at FirebaseAppImpl.firebaseAppImpl.(anonymous function) [as analytics] (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/app/dist/index.node.cjs.js:437:39)
    at MapSubscriber.eval [as project] (webpack://app/./node_modules/@angular/fire/analytics/analytics.js?:129:626)
    at MapSubscriber._next (webpack://app/./node_modules/rxjs/_esm5/internal/operators/map.js?:40:35)
    at MapSubscriber.Subscriber.next (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:63:18) ReferenceError: window is not defined
    at findGtagScriptOnPage (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:348:22)
    at factory (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:473:14)
    at Component.instance.INTERNAL.registerComponent.component.Component.setServiceProps.settings [as instanceFactory] (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/analytics/dist/index.cjs.js:535:16)
    at Provider.getOrInitializeService (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/component/dist/index.cjs.js:219:39)
    at Provider.getImmediate (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/component/dist/index.cjs.js:120:33)
    at FirebaseAppImpl._getService (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/app/dist/index.node.cjs.js:227:49)
    at FirebaseAppImpl.firebaseAppImpl.(anonymous function) [as analytics] (/Users/blove/Desktop/angularfire-prerender-analytics/node_modules/@firebase/app/dist/index.node.cjs.js:437:39)
    at MapSubscriber.eval [as project] (webpack://app/./node_modules/@angular/fire/analytics/analytics.js?:129:626)
    at MapSubscriber._next (webpack://app/./node_modules/rxjs/_esm5/internal/operators/map.js?:40:35)
    at MapSubscriber.Subscriber.next (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:63:18)
ERROR { Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'index.js.map'
Error: Cannot match any routes. URL Segment: 'index.js.map'
    at ApplyRedirects.noMatchError (webpack://app/./node_modules/@angular/router/fesm5/router.js?:2531:16)
    at CatchSubscriber.eval [as selector] (webpack://app/./node_modules/@angular/router/fesm5/router.js?:2512:29)
    at CatchSubscriber.error (webpack://app/./node_modules/rxjs/_esm5/internal/operators/catchError.js?:40:31)
    at MapSubscriber.Subscriber._error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at MapSubscriber.Subscriber._error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at MapSubscriber.Subscriber._error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at TapSubscriber._error (webpack://app/./node_modules/rxjs/_esm5/internal/operators/tap.js?:67:26)
    at resolvePromise (webpack://app/./node_modules/zone.js/dist/zone-node.js?:851:31)
    at resolvePromise (webpack://app/./node_modules/zone.js/dist/zone-node.js?:808:17)
    at eval (webpack://app/./node_modules/zone.js/dist/zone-node.js?:912:17)
    at ZoneDelegate.invokeTask (webpack://app/./node_modules/zone.js/dist/zone-node.js?:422:31)
    at Object.onInvokeTask (webpack://app/./node_modules/@angular/core/fesm5/core.js?:26677:33)
    at ZoneDelegate.invokeTask (webpack://app/./node_modules/zone.js/dist/zone-node.js?:421:60)
    at Zone.runTask (webpack://app/./node_modules/zone.js/dist/zone-node.js?:194:47)
    at drainMicroTaskQueue (webpack://app/./node_modules/zone.js/dist/zone-node.js?:600:35)
    at ZoneTask.invokeTask (webpack://app/./node_modules/zone.js/dist/zone-node.js?:501:21)
    at ZoneTask.invoke (webpack://app/./node_modules/zone.js/dist/zone-node.js?:486:48)

Expected behavior

The AngularFireAnalyticsModule uses the @firebase/analytics module that determines if the gtag script is already present in the DOM. This functionality relies on a global window object in the findGtagScriptOnPage() function. This function should check if the window object is first available.

Actual behavior

Using SSR locally, pre-rendering locally, and running the server in a Firebase cloud function all result in this error.

Possible Workaround

One potential workaround I attempted was to mock the window object using domino:

const win = createWindow(template);
(global as any)['window'] = win;
(global as any)['document'] = win.document;

However, this results in another error:

Unhandled Promise rejection: IDB requires a browser environment ; Zone: <root> ; Task: Promise.then ; Value: IDB requires a browser environment undefined
ERROR { Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'index.js.map'
Error: Cannot match any routes. URL Segment: 'index.js.map'
    at ApplyRedirects.noMatchError (webpack://app/./node_modules/@angular/router/fesm5/router.js?:2531:16)
    at CatchSubscriber.eval [as selector] (webpack://app/./node_modules/@angular/router/fesm5/router.js?:2512:29)
    at CatchSubscriber.error (webpack://app/./node_modules/rxjs/_esm5/internal/operators/catchError.js?:40:31)
    at MapSubscriber.Subscriber._error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at MapSubscriber.Subscriber._error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at MapSubscriber.Subscriber._error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:89:26)
    at MapSubscriber.Subscriber.error (webpack://app/./node_modules/rxjs/_esm5/internal/Subscriber.js?:69:18)
    at TapSubscriber._error (webpack://app/./node_modules/rxjs/_esm5/internal/operators/tap.js?:67:26)
    at resolvePromise (webpack://app/./node_modules/zone.js/dist/zone-node.js?:851:31)
    at resolvePromise (webpack://app/./node_modules/zone.js/dist/zone-node.js?:808:17)
    at eval (webpack://app/./node_modules/zone.js/dist/zone-node.js?:912:17)
    at ZoneDelegate.invokeTask (webpack://app/./node_modules/zone.js/dist/zone-node.js?:422:31)
    at Object.onInvokeTask (webpack://app/./node_modules/@angular/core/fesm5/core.js?:26677:33)
    at ZoneDelegate.invokeTask (webpack://app/./node_modules/zone.js/dist/zone-node.js?:421:60)
    at Zone.runTask (webpack://app/./node_modules/zone.js/dist/zone-node.js?:194:47)
    at drainMicroTaskQueue (webpack://app/./node_modules/zone.js/dist/zone-node.js?:600:35)
    at ZoneTask.invokeTask (webpack://app/./node_modules/zone.js/dist/zone-node.js?:501:21)
    at ZoneTask.invoke (webpack://app/./node_modules/zone.js/dist/zone-node.js?:486:48)

I pushed an additional branch with this attempted workaround: https://github.com/blove/angularfire-prerender-analytics/tree/domino-fix

This appears to be related to the following issue: firebase/firebase-js-sdk#2336

[jamesdaniels]

Sounds like for whatever reason your SSR version of the app isn’t using the UMD, in which I replace the dynamic import with empty().

Two solutions off the top of my head 1) figure out why your SSR target isn’t using UMD as its entry point (maybe your webpack config?) or 2) only provide Analytics in your browser module and make it Optional when you inject it.

[blove]

@jamesdaniels Thank you for the reply.

The webpack config is taken directly from the AngularFire documentation. The entry point is the server.ts file, here: https://github.com/blove/angularfire-prerender-analytics/blob/master/server.ts

The output is set to "umd" in the webpack config here: https://github.com/blove/angularfire-prerender-analytics/blob/b2d70536f2a560e3f716e8f12518ac8814e50c7f/webpack.server.config.js#L23

As far as I can tell, the webpack configuration and the Express server is configured as directed in the documentation.

I am only importing the AngularFireAnalyticsModule module in the AppModule class's @NgModule() decorator: https://github.com/blove/angularfire-prerender-analytics/blob/b2d70536f2a560e3f716e8f12518ac8814e50c7f/src/app/app.module.ts#L31

From what I can tell, I am not using dependency injection so I cannot use the @Optional() decorator.

Perhaps I missed something in your proposed solutions, and if so, can you expand on your suggestions?

I very much appreciate any help you can offer, and if there is any additional assistance I can provide in solving this issue, please let me know. The repository that I have linked to above is public and was an attempt to follow the documentation in order to use SSR with the new AngularFireAnalyticsModule feature in AngularFire 5.3.0.

[alclimb]

I don't think firebase/analytics will work with Node.js in the first place.
(For now, firebase/analytics seems to only work with web browsers)
https://firebase.google.com/docs/analytics?hl=en

[tskweres]

Interested in this as well, is there a way to import firebase analytics after SSR renders the first page? Would love to see a solution for this

[marcelvarela]

I am facing the exactly same problem here with angular 9 and @angular/fire@5.4.2
After mock the window object using domino, I had the same error blove described:
Unhandled Promise rejection: IDB requires a browser environment ; Zone: <root> ; Task: Promise.then ; Value: IDB requires a browser environment undefined

No updates on this issue?

[elucidsoft]

Same issue, in fact I am going to have to rip our Firebase Analytics entirely it seems because of this since SEO is way more important to me at the moment. Also it seems Firebase Analytics doesn't share its information with Google Analytics anyways, so I might as well just use Google Analytics instead. Silly really.

[jamesdaniels]

Closing as outdated, would def like to get analytics to cover server side but at least we aren't crashing anymore

[jdgamble555]

This problem is back, as whenever I include provideAnalytics(() => getAnalytics()), I get navigator is not defined error.

[ezzabuzaid]

Hi @jamesdaniels, I encountered the same issue today. You've to provideAnalytics only in browser env. it should work for you if you tried something like !('process' in globalThis) ? provideAnalytics : [].

I haven't tried though! I'll be relying on GTM instead of GA client.