Encountering an error upon starting the HomeComponent. The configuration set in the environment file is correct. Is there a possibility of incorrect injection? Do I need to inject additional items? Provided are the files being utilized. Assistance would be greatly appreciated, thank you
Error:
ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_HomeComponent])[_AuthenticationService -> _AuthenticationService -> _AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]
app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(),
provideHttpClient(withFetch()),
provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore()),
]
};
home.component.ts
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { AuthenticationService } from '../auth/authentication.service';
@Component({
selector: 'app-home',
standalone: true,
imports: [TranslateModule, RouterLink],
templateUrl: './home.component.html',
})
export class HomeComponent {
constructor(private auth: AuthenticationService) { }
signOut() {
this.auth.signOut().subscribe({
next: () => {
},
error: error => {
}
});
}
}
authentication.service.ts
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { FirebaseError } from 'firebase/app';
import { catchError, from, Observable, throwError } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthenticationService {
constructor(private auth: AngularFireAuth) { }
signIn(email: string, password: string): Observable<any>{
return from(this.auth.signInWithEmailAndPassword(email, password))
.pipe(
catchError((error: FirebaseError) =>
throwError(() => console.log('Error'))
)
);
}
signUp(email: string, password: string): Observable<any>{
return from(this.auth.createUserWithEmailAndPassword(email, password)).pipe(
catchError((error: FirebaseError) =>
throwError(() => console.log('Error'))
)
);
}
//exc...
}
this is main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));