Angular/Firebase: No Firebase App '[DEFAULT]' has been created

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

Je suis un cours Angular.

Mon application compile sans problème mais j'ai une erreur lorsque je souhaite créer un utilisateur.
Je vous joint les différentes partie de mon code pour plus d'informations.

Un grand merci d'avance pour votre aide ! :)

------------ ERREUR

Pièce jointe 607891

------------ APP COMPONENT

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { Component } from '@angular/core';
 
import { initializeApp } from "firebase/app";
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
 
  constructor(){
    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyAaOWtE1wIsDUEZTxMZxAd-KvCgaRyMybs",
      authDomain: "wib-library.firebaseapp.com",
      projectId: "wib-library",
      storageBucket: "wib-library.appspot.com",
      messagingSenderId: "171730683518",
      appId: "1:171730683518:web:69a51b5c96c94c76f4fa2f"
    };
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
  }
 
}

------------ AUTH SERVICE

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import { Injectable } from '@angular/core';
 
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
 
 
@Injectable({
  providedIn: 'root'
})
export class AuthService {
 
  constructor() {}
 
  createNewUser(email:string, password:string){
    return new Promise(
     (resolve,reject)=>{
        console.log('createNewUser 0');
        firebase.auth().createUserWithEmailAndPassword(email, password).then(
          (promesse)=> {
            console.log('createNewUser 1 ' + promesse);
            resolve(promesse);
          },
          (error)=> {
            console.log('createNewUser 2 ' + error);
            reject(error);
          }
        ); // -- FIN THEN
      }
    );
  }
 
 
  signInUser(email:string, password:string){
    return new Promise(
      (resolve,reject) =>{
        firebase.auth().signInWithEmailAndPassword(email, password).then(
          (promesse)=>{
            resolve(promesse);
          },
          (error)=>{
            reject(error);
          }
        );
      }
    )
  }
 
  signOutUser(){
    firebase.auth().signOut();
  }
 
}

------------ SIGNUP COMPONENT -- onSubmit() méthode appelée depuis le template HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from "@angular/router";
import { AuthService } from "../../services/auth.service";
 
 
@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {
 
  signUpForm!:FormGroup; //!: = on force non null / non undefined
  errorMessage:string="";
 
 
  constructor(private formBuilder:FormBuilder,
              private authService:AuthService,
              private router:Router) { }
 
  ngOnInit() {
    this.initForm();
  }
 
  initForm(){
    this.signUpForm = this.formBuilder.group({
      email:['', [Validators.required, Validators.email]],
      password:['',[Validators.required, Validators.pattern(/[0-9a-zA-Z]{6,}/)]]
    });
  }
 
  onSubmit(){
    const email = this.signUpForm.get('email')!.value;
    const password = this.signUpForm.get('password')!.value;
    this.authService.createNewUser(email, password).then(
      ()=>{
        this.router.navigate(['books']);
      },
      (error)=>{
        this.errorMessage=error;
      }
    );
  }
 
}

02/11/2021, 15h39
dukoid
dans app.module as tu ?
Code:

1 2 AngularFireModule.initializeApp(environment.firebase),
https://ichi.pro/fr/comment-connecte...20158101950865

pour info, tu peux heberger gratuitement en version limité avec firebase

https://www.bacancytechnology.com/bl...rebase-hosting

Bonjour dukoid,

Non je n'avais pas cette information dans app module . Je ne l'avais pas non plus dans l'ancien projet et portant je ne suis jamais tombée sur cette erreur :?:?
A la base, j'initialise ma config et je fais appel à initializeApp dans app component

Code:

1
2
3
4
5
6
7
8
9
10
11
 // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyAaOWtE1wIsDUEZTxMZxAd-KvCgaRyMybs",
      authDomain: "wib-library.firebaseapp.com",
      projectId: "wib-library",
      storageBucket: "wib-library.appspot.com",
      messagingSenderId: "171730683518",
      appId: "1:171730683518:web:69a51b5c96c94c76f4fa2f"
    };
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);

J'ai testé ce que tu m'as envoyé mais l'erreur persiste... désolée je débute, j'ai du passer à côté de quelque chose :/

----- APPP MODULE

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { Routes, RouterModule } from "@angular/router";
 
//import { AngularFireModule } from '@angular/fire';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SignupComponent } from './auth/signup/signup.component';
import { SigninComponent } from './auth/signin/signin.component';
import { BookListComponent } from './book-list/book-list.component';
import { SingleBookComponent } from './book-list/single-book/single-book.component';
import { BookFormComponent } from './book-list/book-form/book-form.component';
import { HeaderComponent } from './header/header.component';
 
import { AuthGuardService } from "./services/auth-guard.service";
import { AuthService } from "./services/auth.service";
import { BooksService } from "./services/books.service";
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideDatabase,getDatabase } from '@angular/fire/database';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { provideRemoteConfig,getRemoteConfig } from '@angular/fire/remote-config';
 
 
const appRoutes:Routes =[
  { path: 'auth/signup', component: SignupComponent },
  { path: 'auth/signin', component: SigninComponent },
  { path: 'books', component: BookListComponent },
  { path: 'book/view/:id', component: SingleBookComponent },
  { path: 'book/new', component: BookFormComponent }
]
 
@NgModule({
  declarations: [
    AppComponent,
    SignupComponent,
    SigninComponent,
    BookListComponent,
    SingleBookComponent,
    BookFormComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    //AngularFireModule.initializeApp(environment.firebase),
    RouterModule.forRoot(appRoutes),
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),
    provideFirestore(() => getFirestore()),
    provideRemoteConfig(() => getRemoteConfig())
  ],
  providers: [
    AuthGuardService,
    AuthService,
    BooksService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

AngularFirestoreModule comme ici :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    AngularFireModule.initializeApp({
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "js-scrambler-demo-app.firebaseapp.com",
      projectId: "js-scrambler-demo-app",
      storageBucket: "js-scrambler-demo-app.appspot.com",
      messagingSenderId: "xxxxxxxxxx",
      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Il me dit, entre autre, que les imports suivant ne qont pas bon :
Code:

1 2 import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore';
j'ai remplacé ces imports par :
Code:

1 2 import { AngularFireModule } from '@angular/fire/compat'; import { AngularFirestoreModule } from "@angular/fire/compat/firestore";
J'ai beaucoups d'erreurs qui sont apparut du coup .. des morceaux de template et des méthodes non reconnues

05/11/2021, 12h18
dukoid

je ne comprends pas, c'est si simple

as tu bien suivi cet exemple :

ng add @angular/fire

sinon essaye avec un nouveau projet

si tu peux envoi moi le git du projet

J'ai installé ng add @angular/fire

J'ai modifié / complété mon app module :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { Routes, RouterModule } from "@angular/router";
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SignupComponent } from './auth/signup/signup.component';
import { SigninComponent } from './auth/signin/signin.component';
import { BookListComponent } from './book-list/book-list.component';
import { SingleBookComponent } from './book-list/single-book/single-book.component';
import { BookFormComponent } from './book-list/book-form/book-form.component';
import { HeaderComponent } from './header/header.component';
 
import { AuthGuardService } from "./services/auth-guard.service";
import { AuthService } from "./services/auth.service";
import { BooksService } from "./services/books.service";
 
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { initializeApp, provideFirebaseApp, getApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideDatabase,getDatabase } from '@angular/fire/database';
 
 
const appRoutes:Routes =[
  { path: 'auth/signup', component: SignupComponent },
  { path: 'auth/signin', component: SigninComponent },
  { path: 'books', component: BookListComponent },
  { path: 'book/view/:id', component: SingleBookComponent },
  { path: 'book/new', component: BookFormComponent }
]
 
@NgModule({
  declarations: [
    AppComponent,
    SignupComponent,
    SigninComponent,
    BookListComponent,
    SingleBookComponent,
    BookFormComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    provideFirebaseApp(() => initializeApp({
      apiKey: "AIzaSyAaOWtE1wIsDUEZTxMZxAd-KvCgaRyMybs",
      authDomain: "wib-library.firebaseapp.com",
      projectId: "wib-library",
      storageBucket: "wib-library.appspot.com",
      messagingSenderId: "171730683518",
      appId: "1:171730683518:web:69a51b5c96c94c76f4fa2f"
    })),
    provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),
    provideFirestore(() => getFirestore())
  ],
  providers: [
    AuthGuardService,
    AuthService,
    BooksService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Et l'erreur est toujours la même.

Merci , je vais essayer de le pousser sur git --- UPDATE : Je pense que c'est OK, n'hésite pas à me dire si j'ai raté quelque chose https://github.com/LGiry/library.git
sinon oui j'essaierai de recommencer ce projet

11/11/2021, 09h35
dukoid

le git est vide, pas de conf firebase.

sinon t'as réussie ?
11/11/2021, 14h33
LeukyJoke

Non je n'ai pas réussi.
J'ai recommencé à 0 avec le tuto et j'ai toujours le même problème...
11/11/2021, 17h40
dukoid

essaye ça :

Code:

npm install firebase@8.10.0 @angular/fire@6.1.5

si ça ne fonctionne pas , fait moi un git avec le problème !
je mettrais mes identifiants firebase d'un projet de test
25/11/2021, 22h08
LeukyJoke

Hello !

Désolée pour le délai de réponse, je n'ai pas eu de temps avant ce soir pour me remettre sur ce projet.

Un grand merci à toi pour ton aide et pour ta patience car c'est OK. Il fonctionne !!! :)

Merci , merci :)
26/11/2021, 13h47
krakatoa

pour utiliser la version plus récente de firebase je crois que c'est une histoire ou il faut importer des librairie firebase/compat
un truc comme ça !