Angular 17 和 AngularFire 17 尝试使用服务时出错

Question

我已经被这个问题困扰了一段时间，因为我不熟悉没有 app.module.ts 的 Angular 17 新独立默认值

这是我的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),
  ]
};

这是我的 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

  ) {
...
}

当我尝试在组件中使用此服务时。它抛出了这个错误。

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]: 

我的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"
  },

据我了解，问题是找不到模块。但我确实将其放在应用程序配置的提供程序中。这不是应该的样子吗？或者我应该将其添加到本身的服务中？如果是这样，我该怎么办？

提前非常感谢！

Answer 1

由于该服务是在根级别提供的，因此将其添加到提供者数组是可选的，您的代码听起来不错，应该可以工作，可能是

public afs: AngularFirestore

和

public db: AngularFirestore

是 deplucated 注入！ 您可以在 app.config 中使用另一个重构：

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

我希望这种重复能够解决问题。 或者检查一个服务A是否注入了另一个服务B，在您的组件中，您同时注入了A和B。