Bug: Uncaught (in promise): TypeError: app.database is not a function, AngularFireDatabase

[lcoppinger]

Please let me know if more information is required I wasn't sure how to present it.

Version info

Angular: 5.0.0-rc.5

Firebase: 4.13.1

AngularFire: 5.0.0-rc.7.2-next

Other (e.g. Ionic/Cordova, Node, browser, operating system): Node.js v8.11.1

How to reproduce these conditions

Steps to set up and reproduce
Deployed function to firebase hosting with the below package.json file:

{ "name": "functions", "scripts": { "serve": "firebase serve --only functions", "shell": "firebase experimental:functions:shell", "start": "npm run shell", "deploy": "firebase deploy --only functions", "logs": "firebase functions:log" }, "dependencies": { "@amcharts/amcharts3-angular": "./es5_modules/@amcharts/amcharts3-angular", "@angular/animations": "5.0.0-rc.5", "@angular/cdk": "^5.2.5", "@angular/cli": "^1.6.8", "@angular/common": "5.0.0-rc.5", "@angular/compiler": "5.0.0", "@angular/core": "5.0.0-rc.5", "@angular/flex-layout": "^5.0.0-beta.14", "@angular/forms": "5.0.0-rc.5", "@angular/http": "5.0.0-rc.5", "@angular/platform-browser": "^5.0.0-rc.0", "@angular/platform-browser-dynamic": "5.0.0-rc.5", "@angular/platform-server": "^5.2.10", "@angular/router": "5.0.0-rc.5", "@fortawesome/fontawesome-svg-core": "^1.2.0-11", "@fortawesome/free-brands-svg-icons": "^5.1.0-8", "@fortawesome/free-solid-svg-icons": "^5.1.0-8", "@nguniversal/express-engine": "^6.0.0", "@nguniversal/module-map-ngfactory-loader": "^5.0.0", "@ngx-share/core": "^5.0.1", "@types/angular-google-analytics": "^1.1.33", "@types/d3": "^5.0.0", "@types/express": "^4.11.1", "@types/google.analytics": "0.0.36", "angular-universal-express-firebase": "0.0.4", "angularfire2": "^5.0.0-rc.7.2-next", "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1", "bufferutil": "^3.0.4", "core-js": "^2.4.1", "d3": "^4.9.1", "d3-geo": "^1.10.0", "d3-queue": "^3.0.7", "express": "^4.16.3", "firebase": "^4.13.1", "firebase-admin": "^5.12.1", "firebase-functions": "^1.0.2", "font-awesome": "^4.7.0", "jquery": "^3.2.1", "ngx-google-places-autocomplete": "./es5_modules/ngx-google-places-autocomplete", "ngx-slick": "^0.1.3", "reflect-metadata": "^0.1.12", "rxjs": "^5.5.10", "topojson": "^3.0.0", "typescript": "^2.4.2", "utf-8-validate": "^4.0.1", "web-animations-js": "^2.3.1", "ws": "^5.1.1", "xmlhttprequest": "^1.8.0", "zone.js": "^0.8.14" }, "devDependencies": { "typescript": "^2.5.3" }, "private": true }

Debug output

Error in Firebase functions log

ERROR { Error: Uncaught (in promise): TypeError: app.database is not a function TypeError: app.database is not a function at new AngularFireDatabase (/user_code/node_modules/angularfire2/bundles/database.umd.js:263:29) at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:10670:20) at _createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:10634:26) at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:10619:17) at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:10662:29) at _createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:10634:26) at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:10619:17) at NgModuleRef_.get (/user_code/node_modules/@angular/core/bundles/core.umd.js:11844:16) at resolveDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:12340:45) at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:12210:32) at resolvePromise (/user_code/node_modules/zone.js/dist/zone-node.js:814:31) at resolvePromise (/user_code/node_modules/zone.js/dist/zone-node.js:771:17) at /user_code/node_modules/zone.js/dist/zone-node.js:873:17 at ZoneDelegate.invokeTask (/user_code/node_modules/zone.js/dist/zone-node.js:421:31) at Object.onInvokeTask (/user_code/node_modules/@angular/core/bundles/core.umd.js:4656:33) at ZoneDelegate.invokeTask (/user_code/node_modules/zone.js/dist/zone-node.js:420:36) at Zone.runTask (/user_code/node_modules/zone.js/dist/zone-node.js:188:47) at drainMicroTaskQueue (/user_code/node_modules/zone.js/dist/zone-node.js:595:35) at ZoneTask.invokeTask (/user_code/node_modules/zone.js/dist/zone-node.js:500:21) at ZoneTask.invoke (/user_code/node_modules/zone.js/dist/zone-node.js:485:48) rejection: TypeError: app.database is not a function at new AngularFireDatabase (/user_code/node_modules/angularfire2/bundles/database.umd.js:263:29) at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:10670:20) at _createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:10634:26) at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:10619:17) at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:10662:29) at _createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:10634:26) at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:10619:17) at NgModuleRef_.get (/user_code/node_modules/@angular/core/bundles/core.umd.js:11844:16) at resolveDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:12340:45) at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:12210:32), promise: ZoneAwarePromise { __zone_symbol__state: 0, __zone_symbol__value: TypeError: app.database is not a function at new AngularFireDatabase (/user_code/node_modules/angularfire2/bundles/database.umd.js:263:29) at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:10670:20) at _createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:10634:26) at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:10619:17) at _createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:10662:29) at _createProviderInstance$1 (/user_code/node_modules/@angular/core/bundles/core.umd.js:10634:26) at resolveNgModuleDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:10619:17) at NgModuleRef_.get (/user_code/node_modules/@angular/core/bundles/core.umd.js:11844:16) at resolveDep (/user_code/node_modules/@angular/core/bundles/core.umd.js:12340:45) at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:12210:32) }, zone: Zone { _properties: { isAngularZone: true }, _parent: Zone { _properties: {}, _parent: null, _name: '<root>', _zoneDelegate: [Object] }, _name: 'angular', _zoneDelegate: ZoneDelegate { _taskCounts: [Object], zone: [Circular], _parentDelegate: [Object], _forkZS: null, _forkDlgt: null, _forkCurrZone: [Object], _interceptZS: null, _interceptDlgt: null, _interceptCurrZone: [Object], _invokeZS: [Object], _invokeDlgt: [Object], _invokeCurrZone: [Circular], _handleErrorZS: [Object], _handleErrorDlgt: [Object], _handleErrorCurrZone: [Circular], _scheduleTaskZS: [Object], _scheduleTaskDlgt: [Object], _scheduleTaskCurrZone: [Circular], _invokeTaskZS: [Object], _invokeTaskDlgt: [Object],

Expected behavior

Firebase SSR function to load server content including data from AngularFireDatabase.

Actual behavior

Browser is rendering the data but SSR does not work with AngularFireDatabase call due to the above error.

This is only happening on the server - when I run 'firebase serve' locally I have no issues - I think naively it might be that firebase config for AngularFire is not initialised on the server.

[wilfried01]

I got a similar error with AngularFirestore.

[lcoppinger]

@wilfried01 how did you solve it?

[wilfried01]

@Iccopinger I'm sorry but I didn't. I'm also waiting for the answer.

[hiepxanh]

why dont you upgrade to angularfire2 5.0.0-rc.9 ???

[lcoppinger]

I tried that but I still get the error:
TypeError: Cannot read property 'database' of undefined at new AngularFireDatabase
Its as though my firebase config is not being initialised on the server, but it works fine locally.

[josejaner]

I have the same problem using:

• "angularfire2": 5.0.0-rc.9
• firebase@5.0.3
• ionic-angular": 3.9.2

What was the last stable configuration?
after updating, I tried to recover it and I could not

[salmoro]

Rolling back to the following versions solved it for me:

"angularfire2": "5.0.0-rc.6",
"firebase": "4.10.1",

[jamesdaniels]

Can you try rc.10? This should be fixed as we've cleaned up our dependencies. If that doesn't work I'll reopen.

[vinacmg]

I've done as @jamesdaniels said, but still getting the error. Rolling back as @salmoro recommended worked here.

[jamesdaniels]

@vinacmg perhaps @salmoro's solution worked for now but it's not addressing the root cause going forward. Pinning to an old RC isn't really a solution. I'll dig in and see what might be the cause; hopefully just an ng 5 vs. 6 issue.

[ValentinFunk]

I'm getting this with rc.9 and firebase 5.2.0 without SSR just in a normal client build

[dmytro-grankin]

@jamesdaniels I'm still experiencing the issue using "@angular/fire": "5.1.0" and "firebase": "5.5.8". But, the downgrade to "angularfire2": "5.0.0-rc.6" is a real trouble since the module structure is different. I also tried to use "angularfire2": "5.1.1", but the database() method was not resolved either. The version of Angular is 7.0.0.

Is there another workaround, except the downgrade to the "angularfire2": "5.0.0-rc.6"?

[dmytro-grankin]

For now, I ended up with the following workaround:

class Foo {
   
    constructor(
        private database: AngularFireDatabase
        private _firebaseApp: FirebaseApp
    ) {
        // Redefine the problem method.
        this.firebaseApp.database = () => database.database;
    }
}

[amit-kumar-dubey]

in my local i using this dependency:
"dependencies": { "@angular/common": "8.0.0", "@angular/compiler": "8.0.0", "@angular/core": "8.0.0", "@angular/fire": "5.2.1", "@angular/forms": "8.0.0", "@angular/platform-browser": "8.0.0", "@angular/platform-browser-dynamic": "8.0.0", "@angular/router": "8.0.0", "angularfire2": "5.2.1", "core-js": "2.6.9", "firebase": "6.3.1", "font-awesome": "4.7.0", "rxjs": "6.5.2", "tslib": "^1.10.0", "zone.js": "0.9.1" },
which is running fine on local and same project i upload on stackblitz i got the error :
ERROR Error: Uncaught (in promise): TypeError: app.database is not a function
after update the dependency "angularfire2": "5.0.0-rc.6" this will add more dependency automatically as you can see below it asked for more dependency now its up and running.
Could anyone explain why this resolved.

"@angular/common": "8.0.0", "@angular/compiler": "8.0.0", "@angular/core": "8.0.0", "@angular/fire": "5.2.1", "@angular/forms": "8.0.0", "@angular/platform-browser": "8.0.0", "@angular/platform-browser-dynamic": "8.0.0", "@angular/router": "8.0.0", **"@firebase/app": "0.1.10", "@firebase/app-types": "0.4.2", "@firebase/database": "^0.4.10",** "angularfire2": "5.0.0-rc.6", "core-js": "2.6.9", "firebase": "5.11.1", "font-awesome": "4.7.0", "rxjs": "6.5.2", "rxjs-compat": "^6.5.2", "tslib": "1.10.0", "zone.js": "0.9.1"