web-dev-qa-db-fra.com

AngularFire2 - Impossible de trouver le module @ firebase/database

J'ai souvent installé et utilisé AngularFire2 pour des projets, mais depuis la publication de la version 5, je ne peux pas le configurer correctement.

Ce sont les étapes que je suis pour atteindre le problème.

$ ionic start angularfire2test tabs
$ npm install angularfire2 firebase --save

package.json

"angularfire2": "^5.0.0-rc.3",
"firebase": "^4.5.2",

Ajoutez des informations d'identification Firebase à app.module.ts + importez le module par défaut et le module de base de données. C'est la partie la plus importante

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: [
   ....

Lorsque j'exécute $ ionic serve, le message d'erreur "Impossible de trouver le module" @ firebase/database sur WebpackMissingModule ( http: // localhost: 8100/build/vendor.js: 119190: 82 )

Lors de la vérification du dossier node_modules, @firebase ne possède pas de sous-dossier de base de données, mais le dossier firebase a un dossier de base de données.

Ai-je commis une erreur ou s'agit-il d'un problème général avec AngularFire2?

firebaseionic-frameworkionic2angularfire2
7
Matt

Je pense que cela a à voir avec un problème avec npm . Lorsque vous utilisez du fil pour installer les modules, tout fonctionne parfaitement.

yarn add angularfire2 firebase

tldr: Node: 8.4.0/npm: 5.2.0 a des problèmes, le travail du fil

6
Matt

Vous pouvez essayer avec:

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

ou pour changer AngularFireDatabaseModule par AngularFireDatabase.

3
CSantos

Je n'ai pas eu de chance en essayant de reproduire votre problème. Je suggérerais, si cela vous pose toujours problème, d’essayer ce qui suit:

  1. Vérifiez les différences entre ma configuration ci-dessous et la vôtre
  2. Voir les notes pour la configuration de ionic3 ici
  3. Réinstallation de npm (ça a l'air fou, mais de temps en temps je fais ça, les problèmes disparaissent et je vois que le mien est un peu plus récent que le vôtre)

configuration npm

$npm ls -g --depth=0
/Users/pbrack/.nvm/versions/node/v8.5.0/lib
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Étapes de configuration

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

}
3
Philip Brack

1.Inside package.json, supprimez ^ de "firebase": "^ 4.8.1"

1.1 Rétrograder Firebase de 4.8.1 à 4.8.0 en remplaçant 4.8.1 par 4.8.0

1.2 Le résultat final devrait ressembler à ceci: "base de feu": "4.8.0"

  1. Exécutez npm update dans la racine du projet. NPM va déclasser Firebase pour vous

  2. Exécutez ng serve --open pour vérifier les erreurs de compilation. Il ne devrait pas y avoir de . Raison:

Firebase avait introduit quelques changements radicaux qu'AngularFire2 n'avait pas encore supportés. Jusqu'à ce que l'équipe AngularFire2 s'en occupe, ce sera la solution.

Ajoutez un emoji et dirigez tous ceux qui ont le même problème ici! Cela leur permettrait d'économiser beaucoup de temps!

1
Ashraf Alngar

Installez les dernières versions d'angularfire2 et [email protected]

npm install [email protected]
npm install angularfire2@latest

Il n'est plus nécessaire "--save", cela reste implicite

0
brianbha