AngularFire2 - impossible de trouver module @firebase / database

J'ai installé et utilisé AngularFire2 de nombreuses fois pour des projets, mais depuis la sortie de v5, Je ne peux pas le configurer correctement.

Voici les étapes que je vais suivre pour en arriver là.

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

paquet.json

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

ajouter les justificatifs D'identité Firebase à app.module.ts + importer 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: [
   ....

quand j'exécute $ ionic serve, j'obtiens 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 n'a pas de sous-dossier de base de données, mais le dossier firebase a un dossier-base de données.

ai-je fait quelque chose de mal ou S'agit-il d'un problème général avec AngularFire2?

7
demandé sur Matt 2017-10-19 15:09:39

5 réponses

je pense que cela a à voir avec un problème de mnp. Lorsque vous utilisez le fil pour installer les modules, Tout fonctionne parfaitement.

yarn add angularfire2 firebase

tldr: Nœud: 8.4.0/mnp: 5.2.0 a des problèmes, fil fonctionne

5
répondu Matt 2017-10-25 18:11:44

Vous pouvez essayer avec:

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

modifier AngularFireDatabaseModule par AngularFireDatabase.

3
répondu CSantos 2017-10-19 13:52:01

Je n'ai pas eu de chance en essayant de reproduire votre numéro. Je dirais si c'est toujours un problème pour vous d'essayer le code suivant:

  1. vérifiez les différences entre ma configuration ci-dessous et la vôtre
  2. voir les notes pour configurer ionic3 ici
  3. réinstaller npm (cela semble fou mais de temps en temps je fais cela et les problèmes disparaissent et je vois que le mien est un peu plus récent que le vôtre)

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

É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 {
}

à la maison.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
répondu Philip Brack 2017-10-22 05:19:54

1.À l'intérieur de paquet.json, supprimer ^ de "firebase": "^4.8.1"

1.1 abaisser Firebase de 4.8.1 à 4.8.0 en changeant 4.8.1 à 4.8.0

1.2 le résultat final doit ressembler à ceci: "firebase": "4.8.0"

  1. exécuter la mise à jour de la NGP dans la racine du projet. NPM déclassera Firebase for ya

  2. lancer le serveur ng --ouvrir pour vérifier les erreurs de compilation. Il ne devrait pas être. Raison:

Firebase avait introduit des changements décisifs auxquels AngularFire2 n'avait pas encore fait face. Jusqu'à ce que L'équipe D'AngularFire2 s'en occupe, ce sera la solution.

ajoutez un pouce en haut emoji et dirigez quiconque ayant le même problème ici! Permettrait de sauver beaucoup de leur temps!

1
répondu Ashraf Alngar 2018-01-09 03:42:18

installer la dernière version d'angularfire2 et firebase@4.8.2

npm install firebase@4.8.2
npm install angularfire2@latest

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

0
répondu brianbha 2018-02-24 02:16:04