web-dev-qa-db-fra.com

angularfire2 ne trouve pas le module 'firebase/app'

app.component:

           import { AngularFireModule } from '@angular/fire';
            import { AngularFirestoreModule } from 'angularfire2/firestore';
            import { RoomComponent } from './component/room/room.component';
            import { AngularFireAuth } from '@angular/fire/auth';
           import { FirebaseService } from "./service/firebase.service";
           import { AngularFireAuthModule } from 'angularfire2/auth';


   imports: [
                BrowserModule,
   AngularFireModule.initializeApp(firebaseconfig),
   AngularFirestoreModule    
  ],
 providers: [
FirebaseService,
{
  provide: PERFECT_SCROLLBAR_CONFIG,
  useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
},
AngularFireAuth
 ],

fichier package.json:

{
"dependencies": {
  "@angular/animations": "^5.2.11",
 "@angular/cdk": "^5.2.4",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/material": "^5.2.4",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"angularfire2": "^5.0.1",
"core-js": "^2.4.1",
"dateformat": "^3.0.3",
"firebase": "^5.5.1",
"rxjs": "^6.3.2",
"rxjs-compat": "^6.3.2",
  "zone.js": "^0.8.19"
  },
"devDependencies": {
"@angular/cli": "~1.7.4",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"TypeScript": "~2.5.3"
}
}

Les imports qui ne fonctionnent pas sont situés dans un service:

  import { AngularFirestore, AngularFirestoreCollection, 
   AngularFirestoreDocument } from 'angularfire2/firestore';
   import { AngularFireAuth } from '@angular/fire/auth';
   import { auth } from 'firebase/app'
   import { Observable } from 'rxjs';

Je n'ai inclus que les dépendances qui peuvent avoir quelque chose à voir avec l'erreur, mais si j'ai oublié quelque chose, dites-le moi. 

J'ai déjà essayé plusieurs versions. Cela fonctionne mais il y a une erreur. Le problème réside dans l'import {auth} qui me permet de me connecter à firebase. Je ne sais pas quel est le problème. Parfois, il compile, parfois non. C’est la seule combinaison de versions que j’ai utilisée jusqu’à présent qui compile parfois même avec erreur. Les autres versions ne font que briser les autres importations.

Le projet ne compile que si je supprime momentanément l’importation d’autorisation, puis le remet en place puis l’enregistre.

angularfirebaseangularfire2
2
Daniel Sanchez

Je vais commencer par le grand, et je dirais simplement d'essayer de supprimer votre dossier node_modules et package-lock.json, puis de relancer la commande npm install. En plus de cela, quelques suggestions ...

app.component (app.module?)

Vos importations et vos fichiers sont incohérents, je vois que vous importez depuis angularfire2 ainsi que @angular/fire. Et bien qu’il s’agisse effectivement de la même chose, c’est simplement que l’équipe Angular est en train de migrer/migrée vers @angular/fire. Exécutez npm uninstall angularfire2 puis npm i @angular/fire. Enfin, vous devriez mettre à jour votre app.component (je pense que vous voulez dire app.module) comme si ...

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { RoomComponent } from './component/room/room.component';
import { AngularFireAuth } from '@angular/fire/auth';
import { FirebaseService } from "./service/firebase.service";
import { AngularFireAuthModule } from '@angular/fire/auth';


imports: [
  BrowserModule,
  AngularFireModule.initializeApp(firebaseconfig),
  AngularFirestoreModule,
  AngularFireAuthModule // IMPORT THE AUTH MODULE IF YOU'RE GOING TO USE IT
],
  providers: [
    FirebaseService,
    {
      provide: PERFECT_SCROLLBAR_CONFIG,
      useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG
    },
    // AngularFireAuth (don't need/should not provide this, allow the module to set this up)
  ],

Remarquez que j'aimerais pouvoir voir plus de code, si vous avez un référent et que je veuille vérifier cela, je peux fournir une aide supplémentaire, mais j'espère que cela sera un bon début/une meilleure solution.

0
MichaelSolati

Dans vos app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

import { AppComponent } from './app.component';

const config = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  storageBucket: "",
  messagingSenderId: ""
};

@NgModule({
  imports:      [ 
    BrowserModule,
    AngularFireModule.initializeApp(config),
    AngularFireDatabaseModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
0
Jigno Alfred Venezuela