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?

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 — Juxture
– Juxture, Commented Oct 19, 2017 at 14:46
Node: 8.4.0/npm: 5.2.0. @firebase folder contains 4 folders: app, polyfill, util and webchannel-wrapper — Matt
– Matt, Commented Oct 19, 2017 at 15:41
@Matt 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" /> — Tummala Krishna Kishore
– Tummala Krishna Kishore, Commented Oct 25, 2017 at 9:20

Matt · Accepted Answer · 2017-10-25 18:11:44Z

10

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

answered Oct 25, 2017 at 18:11

Matt

1,92311 gold badges33 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramsha Khalid Over a year ago

Worked for me using npm add angularfire2 firebase

csantos · Accepted Answer · 2017-10-19 13:52:01Z

3

You could try with:

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

or to change AngularFireDatabaseModule by AngularFireDatabase.

answered Oct 19, 2017 at 13:52

csantos

1871 silver badge12 bronze badges

1 Comment

Matt Over a year ago

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

Philip Brack · Accepted Answer · 2017-10-22 05:19:54Z

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

}

brianbha · Accepted Answer · 2018-02-24 02:16:04Z

2

Install latest angularfire2 and [email protected]

npm install [email protected]
npm install angularfire2@latest

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

answered Feb 24, 2018 at 2:16

brianbha

514 bronze badges

Comments

Ashraf Alngar · Accepted Answer · 2018-01-09 03:42:18Z

1

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!

answered Jan 9, 2018 at 3:42

Ashraf Alngar

411 bronze badge

Comments

Joca · Accepted Answer · 2020-11-17 10:46:50Z

0

First you will do npm install firebase @angular/fire

and then npm install angularfire2@latest

answered Nov 17, 2020 at 10:46

Joca

1252 silver badges13 bronze badges

Comments

Utkarsh Singh · Accepted Answer · 2021-01-19 05:27:42Z

0

The following code worked for me

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

answered Jan 19, 2021 at 5:27

Utkarsh Singh

3773 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularFire2 - Cannot find module @firebase/database

7 Answers 7

1 Comment

1 Comment

npm configuration

Configuration Steps

package.json

app.module.ts

home.ts

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

npm configuration

Configuration Steps

package.json

app.module.ts

home.ts

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related