Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Angular 17 and AngularFire 17 Error when trying to use service

I have been stuck with this issue for a while now as I’m not familiar with Angular 17 new standalone default without app.module.ts

This is my app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes), 
    provideAnimations(), 
   importProvidersFrom(provideFirebaseApp(() => initializeApp(environment.firebase))),  
   importProvidersFrom(provideAuth(() => getAuth())), 
   importProvidersFrom(provideAnalytics(() => getAnalytics())), 
   ScreenTrackingService, UserTrackingService, 
   importProvidersFrom(provideFirestore(() => getFirestore())), 
   importProvidersFrom(provideStorage(() => getStorage())),
   importProvidersFrom(AngularFireModule),
   importProvidersFrom(AngularFireAuthModule),
   importProvidersFrom(AngularFirestoreModule),
   importProvidersFrom(AngularFireStorageModule),
   importProvidersFrom(AngularFireDatabaseModule),
  ]
};

This is my auth.service.ts

import { Injectable, NgZone, isDevMode } from '@angular/core';
import { User } from '../services/user';
import * as auth from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import {
  AngularFirestore,
  AngularFirestoreDocument,
} from '@angular/fire/compat/firestore';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})

export class AuthService {
  userData: any; 
  constructor(
    public afs: AngularFirestore, 
    public afAuth: AngularFireAuth,
    public router: Router,
    public ngZone: NgZone, 
    public db: AngularFirestore

  ) {
...
}

When I try to use this service in the component. It thrown this error.

export class SignupComponent {
  
  constructor(
    public authService: AuthService
  ) { }



[Error] ERROR – NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_AuthService -> _AuthService -> _AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: 
  NullInjectorError: No provider for InjectionToken angularfire2.app.options!
NullInjectorError: R3InjectorError(Standalone[_AppComponent])[_AuthService -> _AuthService -> _AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]:

My package.json

  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    "@angular/compiler": "^17.0.0",
    "@angular/core": "^17.0.0",
    "@angular/fire": "^17.0.1",
    "@angular/forms": "^17.0.0",
    "@angular/platform-browser": "^17.0.0",
    "@angular/platform-browser-dynamic": "^17.0.0",
    "@angular/platform-server": "^17.0.0",
    "@angular/router": "^17.0.0",
    "@angular/ssr": "^17.0.9",
    "express": "^4.18.2",
    "firebase": "^10.7.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.2"
  },

From what I understood, the problem is it cannot find the module. But I did put it in the providers in the app config. Isn’t this the way it supposed to be? Or should I add it to the itself services? if so, How should I do it?

Thank you so much in advance!

Tags:

2

Answers


  1. 0

    Since the service is provided in the root level, add it to the providers array is optional, your code sounds good it should work may be public afs: AngularFirestore and public db: AngularFirestore are deplucated injections !
    An other refactoring you can use in your app.config:

    importProvidersFrom(
      provideFirebaseApp(() => initializeApp(firebaseConfig)),
      provideAuth(() => getAuth()),
      provideFirestore(() => getFirestore()),
      provideDatabase(() => getDatabase()),
      provideStorage(() => getStorage()),
      provideFunctions(() => getFunctions()),
      ....
),

    I hope this duplication should solve the problem.
    Or check if a service A injects an other service B, within your component you inject both A and B.

    Login or Signup to reply.
  2. 0

    Eliminate the use of importProvider from the code below:

    export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(
      () => initializeApp(firebaseConfig)
    ),
    provideFirestore(
      () => getFirestore()
    ),
    provideStorage(
      () => getStorage()
    ),
    provideAuth(
      () => getAuth()
    ),
    provideHttpClient()
  ],
  …
};
```"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search