Open coastriders opened 1 year ago
This issue does not seem to follow the issue template. Make sure you provide all the required information.
Post code, not pictures.
The error is on line 54 of your login.component.ts, which you have not shown.
// that's my whole log.component.ts // line 54 that's the catch (e)
import { Component, HostListener, Inject, OnDestroy, OnInit } from '@angular/core';
import { Observable, of, tap } from 'rxjs';
import { InputModel } from 'src/interfaces/Input';
import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, OnDestroy {
private auth: Auth = Inject(Auth)
items:InputModel[] = [
{
name: 'email',
placeholder: 'Email',
type: 'email',
},
{
name: 'password',
placeholder: 'Mot de passe',
type: 'password',
}
]
model = {
email: "",
password: "",
}
ngOnInit() {
console.log('✅ - login page has mounted')
console.log(' auth ---', this.auth)
}
ngOnDestroy() {
console.log('login page has unmounted')
}
@HostListener('submit', ['$event'])
onSubmitForm(event:Event){
event.preventDefault();
console.log('submitForm', this.model)
signInWithEmailAndPassword(this.auth, this.model.email, this.model.password)
.then((user) => {
console.log('🥎 user', user);
})
.catch((e) => {
console.log('error', e)
})
}
@HostListener('input', ['$event'])
onInputChange(event:Event, name:string):void{
const target:any = event.target
if(name === 'email'){
this.model.email = target.value
console.log('this.model', this.model)
}
if(name === 'password'){
this.model.password = target.value
console.log('this.model', this.model)
}
}
}
Please re-read the code block documentation I linked to above and format your post appropriately.
For example: ```ts // All on a line by itself ☝️ Your Code Here // All on a line by itself 👇 ```
Don't mix async
await
and .then()
and .catch()
.
The mixing does not change a thing, thanks for trying @rgant
The mixing does not change a thing, thanks for trying @rgant
Not mixing async
and then
makes for better code quality. Better code quality makes it easy for follow code and improve it. And yes, that has (probably) nothing to do with your issue.
It is difficult to read your code when not properly formatted. So I haven't yet because I am waiting for you to resolve that.
@rgant I wonder if the problem is not related to the versions of the dependencies I use.
That doesn't tell you what is installed. You need to run ng version
to get an overview of the installed versions that Angular things are interesting.
You need to run npm list @angular/fire firebase rxfire
and similar commands to get the installed version of packages in your repo. The versions in your package.json appear appropriate.
Where is your initializeApp
or otherwise setup of Angular Firebase? Show that code?
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { getApp, initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { ReCaptchaV3Provider, initializeAppCheck, provideAppCheck } from '@angular/fire/app-check';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { provideFunctions,getFunctions } from '@angular/fire/functions';
import { provideMessaging,getMessaging } from '@angular/fire/messaging';
import { provideStorage,getStorage } from '@angular/fire/storage';
import { DashboardComponent } from './dashboard/dashboard.component';
import { LoginComponent } from './login/login.component';
import { InputComponent } from './input/input.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent,
LoginComponent,
InputComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => initializeAppCheck(getApp(), {
provider: new ReCaptchaV3Provider("...."),
})),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore()),
provideFunctions(() => getFunctions()),
provideMessaging(() => getMessaging()),
provideStorage(() => getStorage())
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I have managed to find a solution here it is
import { Component, Inject, OnInit } from '@angular/core';
import { FirebaseApp } from '@angular/fire/app';
import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';
import { getAuth } from 'firebase/auth';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
title = 'th-app';
constructor(private app: FirebaseApp) {}
ngOnInit() {
const auth = getAuth(this.app);
console.log('auth', auth);
signInWithEmailAndPassword(auth, "example@gmail.com", "password")
.then((res) => {
console.log('res', res)
})
.catch((err) => {
console.log('err', err)
})
}
}
// another way of writing it
import { Component, Inject, OnInit } from '@angular/core';
import { FirebaseApp } from '@angular/fire/app';
import { Auth, signInWithEmailAndPassword, getAuth } from '@angular/fire/auth';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
title = 'th-app';
auth: Auth;
constructor(private app: FirebaseApp) {
this.auth = getAuth(this.app);
}
ngOnInit() {
console.log('auth', this.auth);
signInWithEmailAndPassword(this.auth, "example@gmail.com", "password")
.then((res) => {
console.log('res', res)
})
.catch((err) => {
console.log('err', err)
})
}
}
I also got the same error. what to do?
Look UP ! 😅✌️
Look UP ! 😅✌️
I found the solution. I had to push my project to GitHub, clone it, and then run the 'npm i' command. 🙂
I have been trying to understand why something always does not work when we follow your docs and examples.
I expected your 6-month-updated-doc to be of use.
I have obviously tried so many things before yielding to the temptation of this issue