Discussion :

[LeukyJoke]

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




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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[dukoid]

dans app.module as tu ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[LeukyJoke]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[krakatoa]

AngularFirestoreModule comme ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[LeukyJoke]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

j'ai remplacé ces imports par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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