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

Created on 18 May 2018  路  14Comments  路  Source: angular/angularfire

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.

picture lcoppinger
😕1

Most helpful comment

Rolling back to the following versions solved it for me:

"angularfire2": "5.0.0-rc.6",
"firebase": "4.10.1",
picture salmoro on 21 May 2018
👍3

All 14 comments

I got a similar error with AngularFirestore.

wilfried01 picture wilfried01 on 18 May 2018
😕1

@wilfried01 how did you solve it?

lcoppinger picture lcoppinger on 18 May 2018
😕1

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

wilfried01 picture wilfried01 on 18 May 2018

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

hiepxanh picture hiepxanh on 19 May 2018

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.

lcoppinger picture lcoppinger on 19 May 2018

I have the same problem using:

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

josejaner picture josejaner on 21 May 2018

Rolling back to the following versions solved it for me:

"angularfire2": "5.0.0-rc.6",
"firebase": "4.10.1",
salmoro picture salmoro on 21 May 2018
👍3

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

jamesdaniels picture jamesdaniels on 22 May 2018

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

vinacmg picture vinacmg on 22 May 2018

@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.

jamesdaniels picture jamesdaniels on 22 May 2018
👍1

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

Kamshak picture Kamshak on 11 Jul 2018

@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 picture dmytro-grankin on 4 Dec 2018

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;
    }
}
dmytro-grankin picture dmytro-grankin on 4 Dec 2018

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"

amit-kumar-dubey picture amit-kumar-dubey on 31 Jul 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

adriandurran picture adriandurran  路  3Comments
DennisSmolek picture DennisSmolek  路  3Comments
Sun3 picture Sun3  路  3Comments
itisparas picture itisparas  路  3Comments
fisherds picture fisherds  路  3Comments