"IDBIndex is not defined" after updating from 13.03 → v13.10 (pre-rendering)

Which @angular/* package(s) are the source of the bug?

Don’t known / other

Is this a regression?

Yes

Description

After upgrading to angular 13.10 from 13.03, pre-rending the app fails with the “IDBIndex is not defined” error.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

IDBIndex is not defined

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.1.1
Node: 14.17.0
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 13.1.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                          Version
----------------------------------------------------------
@angular-devkit/architect        0.1301.1
@angular-devkit/build-angular    13.1.1
@angular-devkit/core             13.1.1
@angular-devkit/schematics       13.1.1
@angular/cli                     13.1.1
@angular/fire                    7.2.0
@nguniversal/aspnetcore-engine   13.0.1
@nguniversal/builders            13.0.1
@nguniversal/express-engine      13.0.1
@schematics/angular              13.1.1
rxjs                             6.6.7
typescript                       4.4.4

Anything else?

Reverting back to 13.03 resolves this error.

[mazlano27]

@kgajera thank you for your insight - based on some experimentation, I managed to find the fix! 😃

Solution: Create a custom webpack file which excludes firebase from the server bundle.

Steps:

1. Install @angular-builders/custom-webpack as a dev dependency
2. Create a file “custom-webpack.config.js” in the project root and add the following:

module.exports = {
     externals: [
          /^firebase/
     ]
}

1. Update angular.json to incorporate this custom webpack config into the build process

"server": {
     "builder": "@angular-builders/custom-webpack:server",
     "options": {
          "customWebpackConfig": {
               "path": "./custom-webpack.config.js",
               "replaceDuplicatePlugins": true
          },
          ...
     },
},

1. Done!

References:

1. https://alligator.io/angular/Custom-webpack-config/
2. https://github.com/angular/angularfire/blob/master/docs/universal/getting-started.md#3-add-a-webpack-config-for-the-express-server
3. https://github.com/firebase/firebase-js-sdk/issues/2222#issuecomment-538072948

[ohabash]

Our team has all the latest versions of NX and NG (13.2) we were able to get rid of this problem by downgrading one package.

"@angular-devkit/build-angular": "^13.0.4",