AngularFire2 - Cannot find @ firebase / database module

Question

I have installed and used AngularFire2 for projects many times, but since the release of v5 I have not been able to configure it correctly.

These are the steps that I am taking to resolve this 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 the 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 "I can not find the module" @ firebase / database "in webpackMissingModule ( http: // localhost: 8100 / build / vendor.js: 119190: 82 )

When checking the node_modules folder, @firebase does not have a database subfolder, but there is a database folder in the firebase folder.

Am I doing something wrong or is this a common problem with AngularFire2?

Answer 1

I think this is due to a problem with npm. When using yarn to install modules, everything works flawlessly.

 yarn add angularfire2 firebase 

TL; DR: Node: 8.4.0 / npm: 5.2.0 has problems, the yarn works

Answer 2

You can try:

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

or change AngularFireDatabaseModule to AngularFireDatabase .

Answer 3

I am not lucky to reproduce your problem. I would advise if this is still a problem if you try the following:

• Check the differences between my configuration below and yours
• View notes for configuring ionic3 here
• Reinstalling npm (it sounds crazy, but sometimes I do it and the problems go away and I see that mine is a little newer than yours).

Configuration

npm

 $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 

Setup 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

1. Inside package.json, remove ^ from "firebase": "^ 4.8.1"

1.1 Downgrade Firebase from 4.8.1 to 4.8.0, changing 4.8.1 to 4.8.0

1.2 The end result should look like this: "firebase": "4.8.0"

2. Run the npm update in the root of the project. NPM downgrades Firebase for ya

3. Run ng serve --open to check for compilation errors. They should not be. Cause:

Firebase introduced some violations that AngularFire2 has not yet overcome. Until the AngularFire2 team works, this will be the solution.

Add an emoji preview and direct anyone who has the same problem! Save a lot of time!

Answer 5

Install the latest version of angularfire2 and firebase@4.8.2

 npm install firebase@4.8.2 npm install angularfire2@latest 

No longer need "-save", it remains implicit