AngularFire2 - Cannot find module #firebase/database - firebase

Question

I've installed and used AngularFire2 a lot of times for projects, but since the release of v5, I can't set it up correctly.
These are the steps I follow to reach the issue.
$ ionic start angularfire2test tabs
$ npm install angularfire2 firebase --save
package.json
"angularfire2": "^5.0.0-rc.3",
"firebase": "^4.5.2",
Add Firebase credentials to app.module.ts + import default module and database module. This is the most important part
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
...
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseCredentials),
AngularFireDatabaseModule
],
bootstrap: [IonicApp],
entryComponents: [
....
When I execute $ ionic serve, I get the error message "Cannot find module "#firebase/database" at webpackMissingModule (http://localhost:8100/build/vendor.js:119190:82)
When checking the node_modules folder, #firebase doesn't have a database subfolder, but the firebase-folder does have a database-folder.
Did I do something wrong or is it a general issue with AngularFire2?

Answer 1

I think it has to do with an issue with npm.
When using yarn to install the modules, everything works flawlessly.
yarn add angularfire2 firebase
tldr: Node: 8.4.0/npm: 5.2.0 has issues, yarn works

Answer 2

You could try with:
$ rm -rf node_modules/
$ npm install
$ npm install angularfire2#latest --save
or to change AngularFireDatabaseModule by AngularFireDatabase.

Answer 3

I had no luck trying to reproduce your issue.
I would suggest if this is still an issue for you trying the following:
Check for differences between my configuration below and yours
View the notes for configuring ionic3 here
Reinstalling npm (sounds crazy but occasionally I do this and issues disappear and I see mine is a little newer than yours)
npm configuration
$npm ls -g --depth=0
/Users/pbrack/.nvm/versions/node/v8.5.0/lib
├── cordova#7.1.0
├── cordova-check-plugins#3.0.1
├── ionic#3.13.2
├── ios-deploy#1.9.2
└── npm#5.4.2
Configuration Steps
$ ionic start angularfire2test blank
$ npm install angularfire2 firebase --save
package.json
{
"name": "angularfire-test",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.4.3",
"#angular/compiler": "4.4.3",
"#angular/compiler-cli": "4.4.3",
"#angular/core": "4.4.3",
"#angular/forms": "4.4.3",
"#angular/http": "4.4.3",
"#angular/platform-browser": "4.4.3",
"#angular/platform-browser-dynamic": "4.4.3",
"#ionic-native/core": "4.3.0",
"#ionic-native/splash-screen": "4.3.0",
"#ionic-native/status-bar": "4.3.0",
"#ionic/storage": "2.0.1",
"angularfire2": "^5.0.0-rc.3",
"firebase": "^4.6.0",
"ionic-angular": "3.7.1",
"ionicons": "3.0.0",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.0.0",
"typescript": "2.3.4"
},
"description": "An Ionic project"
}
app.module.ts
import {BrowserModule} from '#angular/platform-browser';
import {ErrorHandler, NgModule} from '#angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {SplashScreen} from '#ionic-native/splash-screen';
import {StatusBar} from '#ionic-native/status-bar';
import {MyApp} from './app.component';
import {HomePage} from '../pages/home/home';
import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule, AngularFireDatabase} from 'angularfire2/database';
import {AngularFireAuthModule} from 'angularfire2/auth';
export const firebaseConfig = {
apiKey: "xxxxxxxxxx",
authDomain: "your-domain-name.firebaseapp.com",
databaseURL: "https://your-domain-name.firebaseio.com",
storageBucket: "your-domain-name.appspot.com",
messagingSenderId: '<your-messaging-sender-id>'
};
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
AngularFireDatabase,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {
}
home.ts
import {Component} from '#angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
import {Observable} from 'rxjs/Observable';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
items: Observable<any[]>;
constructor(afDB: AngularFireDatabase) {
this.items = afDB.list('cuisines').valueChanges();
}
}

Answer 4

Install latest angularfire2 and firebase#4.8.2
npm install firebase#4.8.2
npm install angularfire2#latest
It is no longer necessary "--save", it remains implicit

Answer 5

1.Inside package.json, remove ^ from "firebase": "^4.8.1"
1.1 Downgrade Firebase from 4.8.1 to 4.8.0 by changing 4.8.1 to 4.8.0
1.2 End result should look like this: "firebase": "4.8.0"
Run npm update in the Project Root. NPM will downgrade Firebase for ya
Run ng serve --open to check for compilation errors. There shouldn't be any.
Reason:
Firebase had introduced some breaking changes that AngularFire2 had not coped up with yet. Until the AngularFire2 team work it out, this will be the solution.
Add a thumbs up emoji and direct anyone having the same trouble here! Would save a lot of their time!

Answer 6

First you will do npm install firebase #angular/fire
and then npm install angularfire2#latest

Answer 7

The following code worked for me
npm install --save firebase #angular/fire -f