Angular Universal with Angular Fire is breaking - IDBIndex is not defined

[miguelsmuller]

I have a project i am trying to implement ssr with universal angular. but I'm not getting it.
I thought it was a problem in my code until I started a project from scratch to test and found something was wrong.

**ReferenceError: IDBIndex is not defined**

I commented on this open issue in the angular universal repository

Version info

Angular CLI: 13.1.2
Node: 16.13.1
Package Manager: npm 8.1.2
OS: linux x64

Angular: 13.1.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@angular/fire                   7.2.0
@nguniversal/builders           13.0.1
@nguniversal/express-engine     13.0.1
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4

How to reproduce these conditions

I created this empty project to simulate the problem and show that it's not an error in the code I made.
https://github.com/miguelsmuller/teste-project

I just followed the following steps:

• ng new teste-project
• ng add @angular/material
• ng add @ngrx/store
• ng add @ngrx/effects
• ng add @nguniversal/express-engine
• ng add @angular/fire

each command above is a commit from that test project

the last command (ng add @angular/fire) returned as shown in the image below. The informed parameters are also shown in the image.

and finally the error that is displayed when I run the command npm run build:ssr && npm run serve:ssr - image below in the right column. You can also see in this image on the left that when I run npm run start as csr no error is displayed.

Debug output

ReferenceError: IDBIndex is not defined
    at /home/migue/FromLinux/projects/teste-project/dist/teste-project/server/main.js:1:4322339
    at /home/migue/FromLinux/projects/teste-project/dist/teste-project/server/main.js:1:4644564
    at Object.<anonymous> (/home/migue/FromLinux/projects/teste-project/dist/teste-project/server/main.js:1:4644796)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

Expected behavior

I believe the expected is node running the app listening on port 4000

Actual behavior

The compilation process is going on but probably with some error because the npm run build:ssr is finished but the npm run serve:ssr is not terminated, it just displays the entire contents of the bundle on the console and then the ReferenceError: IDBIndex is not defined error appears

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[rossanmol]

Downgrading (from 17/16) to Node ^14 helped me.

[miguelsmuller]

Hey @rossanmol....
Everything's fine with you?

I've tried with the node versions below (10, 12, 14, 16 and 17). All gave the same error with the exception of nde in v10 because the cli command is not compatible.

With node-v10
rm -rf package-lock.json node_modules -> OK
npm install -> OK
npm run build:ssr ->  FAILED

The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10.

With node-v12
rm -rf package-lock.json node_modules -> OK
npm install -> OK
npm run build:ssr -> OK 
npm run serve:ssr -> 

ERRO: ReferenceError: IDBIndex is not defined

With node-v14
rm -rf package-lock.json node_modules -> OK 
npm install -> OK
npm run build:ssr -> OK
npm run serve:ssr -> FAILED

ERRO: ReferenceError: IDBIndex is not defined

With node-v16
rm -rf package-lock.json node_modules -> OK
npm install -> OK 
npm run build:ssr -> OK 
npm run serve:ssr -> FAILED

ERRO: ReferenceError: IDBIndex is not defined

With node-v17
rm -rf package-lock.json node_modules -> OK
npm install -> OK
npm run build:ssr -> OK
npm run serve:ssr -> FAILED

ERRO: ReferenceError: IDBIndex is not defined

[samizarraa]

Same error

proxyRequestMethods(Index, '_index', IDBIndex, [
ReferenceError: IDBIndex is not defined

Angular SSR 13

[Santoshah]

I am getting same issue after I upgrade to 12.0.1 to 13.1.3

[Santoshah]

I think this is right platform to post instead of angular universal.

I am getting Error: No template for dependency: PureExpressionDependency errors after following custom webpack configuration.

I believe this is due to excluding of fire base from webpack. But again installing firebase and excluding it during bundle generation don't make sense either. Do we have other solutions?

Detail can be found here

[miguelsmuller]

@ALL do you have any news other than downgrading?

[fediatayen]

@ALL any solutions yet ?

[VictorienTardif]

Only working workaround for now: angular/universal#2475 (comment)

[onclave]

Any update on this? Seems like this issue has been lurking around for a long time now.

[miguelsmuller]

I do not know. but it seems to me that the maintainers will not give a damn about this situation.

[jamesdaniels]

We've been looking into this, it's not a problem with AngularFire though; it seems to be a problem with a dependency of Firebase JS SDK, idb, now that Angular Universal is targeting modules in Node.js.

[jamesdaniels]

@miguelsmuller please keep it respectful, we have a lot of other duties and are doing our best to stay on top of stuff but sometimes things like this slip through. This library is at the intersection of many of dependencies & any violation of semver can put us in a painful spot.

[onclave]

@jamesdaniels can you point out where exactly to look into so that I can start debugging and try to figure out where the issue lies? I have no experience with firebase in general hence getting a grasp on this is a bit overwhelming. I have been looking into how to setup firebase with angular hoping that the angularfire library follows something similar, but if you at least point to the right direction, I hope I can be of some help too!