Angularfire: ERROR TypeError: af(...).database is not a function in angular production build

[johnrivelt]

Version info

Angular:
8.1.1
Firebase:
6.3.1
AngularFire:
5.2.1

Other (e.g. Ionic/Cordova, Node, browser, operating system):
Windows 10
Browser: Chrome 75.0.3770.142 (Official Build) (64-bit)
Node v12.6.0

How to reproduce these conditions

Failing test unit, Plunkr, or JSFiddle demonstrating the problem
N/A

Steps to set up and reproduce

ng new my-app
cd my-app
npm install firebase @angular/fire --save

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.1.1",
    "@angular/common": "~8.1.1",
    "@angular/compiler": "~8.1.1",
    "@angular/core": "~8.1.1",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.1.1",
    "@angular/platform-browser": "~8.1.1",
    "@angular/platform-browser-dynamic": "~8.1.1",
    "@angular/router": "~8.1.1",
    "firebase": "^6.3.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.801.1",
    "@angular/cli": "~8.1.1",
    "@angular/compiler-cli": "~8.1.1",
    "@angular/language-service": "~8.1.1",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

app.module.ts

import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabase } from '@angular/fire/database';

import { firebaseConfig } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireAuthModule,
    AngularFireModule.initializeApp(firebaseConfig),


    AppRoutingModule
  ],
  providers: [
    AngularFireDatabase,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ng8-firebase-app';
  constructor(db: AngularFireDatabase) { 
    console.log(db);

  }
}

build and run web server

ng build --prod
cd dist\<app-name>
//run your web server

Sample data and security rules
N/A

Debug output

In development mode, it is all good, but it does not work in production build.

* Errors in the JavaScript console *
ERROR TypeError: af(...).database is not a function

Expected behavior

See the next line from console.
AngularFireDatabase {scheduler: FirebaseZoneScheduler, database: Database}

Actual behavior

main-es2015.98fa991f7dc50e217757.js:1 ERROR TypeError: af(...).database is not a function
    at main-es2015.98fa991f7dc50e217757.js:1
    at a.invoke (polyfills-es2015.4d31cca2afc45cfd85b5.js:1)
    at t.run (polyfills-es2015.4d31cca2afc45cfd85b5.js:1)
    at eo.runOutsideAngular (main-es2015.98fa991f7dc50e217757.js:1)
    at new <anonymous> (main-es2015.98fa991f7dc50e217757.js:1)
    at main-es2015.98fa991f7dc50e217757.js:1
    at Rr (main-es2015.98fa991f7dc50e217757.js:1)
    at Nr (main-es2015.98fa991f7dc50e217757.js:1)
    at Qr.get (main-es2015.98fa991f7dc50e217757.js:1)
    at gi (main-es2015.98fa991f7dc50e217757.js:1)

[luisfelipesd]

this is also happening to meeee

[xyboox]

Happening here too, with this configuration:

Angular CLI: 8.2.0
Node: 10.16.0
OS: darwin x64
Angular: 8.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.802.0
@angular-devkit/build-angular 0.802.0
@angular-devkit/build-optimizer 0.802.0
@angular-devkit/build-webpack 0.802.0
@angular-devkit/core 8.2.0
@angular-devkit/schematics 8.2.0
@angular/cdk 8.1.2
@angular/fire 5.2.1
@angular/material 8.1.2
@ngtools/webpack 8.2.0
@schematics/angular 8.2.0
@schematics/update 0.802.0
rxjs 6.4.0
typescript 3.5.3
webpack 4.38.0

[travis3pi]

I am having the same issue but with "af(...).auth" error in the console.

[AnatoliiOmelchenko]

@johnrivelt I`ve met this issue also. You have to import AngularFireDatabaseModule to your module

[johnrivelt]

@AnatoliiOmelchenko, where do I need to add AngularFireDatabase to? I already added it as provider.

[AnatoliiOmelchenko]

@johnrivelt remove provider AngularFireDatabase, and add to imports AngularFireDatabaseModule http://prntscr.com/oq1b0d

[johnrivelt]

Thanks @AnatoliiOmelchenko, it worked.

Naming convention has changed for new angularfire2, see
https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md.

//app.modules.ts
//...
- import { AngularFireDatabase } from '@angular/fire/database';
+ import { AngularFireDatabaseModule } from '@angular/fire/database';

@NgModule({
  declarations: [
    AppComponent,
    //...
  ],
  imports: [
    //...
    AppRoutingModule,
    AngularFireAuthModule,
+ AngularFireDatabaseModule,  // add in angularfire 5.2.1 
    AngularFireModule.initializeApp(firebaseConfig),
  ],
  providers: [
    //...   
-   //AngularFireDatabase,  // remove in angularfire 5.2.1 
  ],
  bootstrap: [AppComponent]
})

Still don't know why previous setting worked for development,not for production. 🤷‍♀️