ReferenceError: IDBIndex is not defined in angular universal app

1
votes

I was running the application using "ng serve" it was working fine. But after I built the app using "npm run build:ssr", The app got built successfully.

After building and running the angular 7 universal application, I get these errors in the dist folder.

/home/trd/TRD/dpm_home_page/dist/server.js:255862

proxyRequestMethods(Index, '_index', IDBIndex, [ ^ ReferenceError: IDBIndex is not defined at Object. (/home/trd/TRD/dpm_home_page/dist/server.js:255862:38)(/home/trd/TRD/dpm_home_page/dist/server.js:26:30) at Object.firebase (

Here is my package.json file:

 {
  "name": "angular-io-example",
  "version": "1.0.0",
  "private": true,
  "description": "Example project from an angular.io guide.",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "lint": "tslint ./src/**/*.ts -t verbose",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve_dev:ssr": "node dist/server.js",
    "serve:ssr": "forever start dist/server.js",
    "build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.10",
    "@angular/compiler": "^6.1.10",
    "@angular/core": "^6.1.10",
    "@angular/flex-layout": "^6.0.0-beta.18",
    "@angular/forms": "^6.1.10",
    "@angular/http": "6.0.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.10",
    "@angular/platform-browser-dynamic": "^6.1.10",
    "@angular/pwa": "^0.6.8",
    "@angular/router": "^6.1.10",
    "@angular/service-worker": "^6.1.10",
    "@angular/upgrade": "^6.1.10",
    "@firebase/app-types": "^0.3.2",
    "@firebase/auth-types": "^0.3.4",
    "@firebase/database-types": "^0.3.2",
    "@firebase/firestore-types": "^0.7.0",
    "@firebase/messaging-types": "^0.2.3",
    "@firebase/storage-types": "^0.2.3",
    "@nguniversal/express-engine": "^6.1.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.1.0",
    "angular-in-memory-web-api": "^0.6.1",
    "angularfire2": "^5.1.0",
    "cdk": "^0.31.0",
    "core-js": "^2.6.5",
    "firebase": "6.0.2",
    "forever": "^1.0.0",
    "jasmine-reporters": "^2.3.2",
    "ng2-pdf-viewer": "^5.2.4",
    "protractor-html-reporter-2": "^1.0.4",
    "rxjs": "^6.5.2",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^6.2.9",
    "@angular/compiler-cli": "^7.2.15",
    "@angular/platform-server": "^6.1.10",
    "@types/jasmine": "^2.8.16",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^6.14.6",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "lodash": "^4.17.11",
    "phantomjs-prebuilt": "^2.1.7",
    "protractor": "~5.3.0",
    "ts-loader": "^4.5.0",
    "ts-node": "^5.0.1",
    "tslint": "^5.16.0",
    "typescript": "^3.2.4",
    "webpack-cli": "^2.0.14"
  },
  "repository": {}
}
2
angularfirebase

2 Answers

1
votes

I use "@angular/fire": "^5.2.0-beta.3", instead of "angularfire2": "^5.1.0" I am facing the same issue, after implementing "AngularFirePerformanceModule", I removed it; import { AngularFirePerformanceModule } from '@angular/fire/performance'; and the issue went away.

1
votes

if you still want to use the angulare/fire/performance module, in your app.module.ts, you could do this.

import { isPlatformBrowser } from '@angular/common';
import { AppComponent } from './app.component';

const importModuleArray: any[] = [ // your modules here ]

if (isPlatformBrowser) {
  require('@angular/fire/performance').then(module => {
    importModuleArray.push(module.AngularFirePerformanceModule);
  });}

@NgModule({
  **your declarated modules as AppComponent for example**
  ],
  imports: importModuleArray
  bootstrap: [AppComponent]
})