AngularFire2 - Cannot find module @firebase/database

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?

Halfmoon

Using exact the same versions and code this is working on my machine, very strange. Maybe something with node/npm? i'm using node v.6.11.3 and npm 3.10.10 My @firebase does have the database subfolder though. See this image: snag.gy/3dDiAK.jpg – Isolecithal

Node: 8.4.0/npm: 5.2.0. @firebase folder contains 4 folders: app, polyfill, util and webchannel-wrapper – Halfmoon

@Halfmoon Typings for firebase 3 seem not to be available yet so it doesn't help to install the firebase typings from the global repository.to make it workout include the typings from node_modules/angularfire2 into the typings/main.d.ts file:/// <reference path="../node_modules/angularfire2/firebase3.d.ts" /> – Regionalism

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

Halfmoon

Worked for me using npm add angularfire2 firebase – Hanover

Answer 2

You could try with:

$ rm -rf node_modules/
$ npm install
$ npm install angularfire2@latest --save

or to change AngularFireDatabaseModule by AngularFireDatabase.

Hayleyhayloft

Sadly, neither of those solutions work. I'm still having the same issues – Halfmoon

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:

1. Check for differences between my configuration below and yours
2. View the notes for configuring ionic3 here
3. 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
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

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();
  }

}

Hardcastle

Answer 4

Install latest angularfire2 and [email protected]

npm install [email protected]
npm install angularfire2@latest

It is no longer necessary "--save", it remains implicit

Sauna

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"

2. Run npm update in the Project Root. NPM will downgrade Firebase for ya

3. 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!

Antiseptic

Answer 6

First you will do npm install firebase @angular/fire

and then npm install angularfire2@latest

Jackleg

Answer 7

The following code worked for me

npm install --save firebase @angular/fire -f

Thordis