Modular Auth with compat AuthGuards throws R3InjectorError (NullInjectorError: No provider for InjectionToken angularfire2.app.options!)

### Version info

**Angular:** 12.2.7

**Firebase:** 9.3.0

**AngularFire:** 7.0.4

**Other (e.g. Ionic/Cordova, Node, browser, operating system):**

Node: 12.18.3
Os: macOS Big Sur (11.2.3)

### How to reproduce these conditions

**Steps to set up and reproduce**

1. Create an app, using the new, modular providers

```ts
// app.module.ts
import { provideFirebaseApp, initializeApp, getApp } from '@angular/fire/app';
import {
initializeAuth,
provideAuth,
browserPopupRedirectResolver,
indexedDBLocalPersistence,
connectAuthEmulator,
} from '@angular/fire/auth';
...
@NgModule({
...
imports: [
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
const auth = initializeAuth(getApp(), {
persistence: indexedDBLocalPersistence,
popupRedirectResolver: browserPopupRedirectResolver,
});
if (environment.emulator) {
connectAuthEmulator(auth, 'http://localhost:9099', {
disableWarnings: true,
});
}
return auth;
})
...
],
...
```

2. Try to create auth guards

```ts
// app-routing.module.ts

import {
redirectLoggedInTo,
canActivate,
} from '@angular/fire/compat/auth-guard';

const redirectToDashboard = () => {
return redirectLoggedInTo('dashboard');
};

const routes: Routes = [
{
path: '',
component: LandingPageComponent,
...canActivate(redirectToDashboard),
data: { animation: 'Sign in' },
}
];

@NgModule({
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
exports: [RouterModule],
})
export class AppRoutingModule {}
```
### Debug output

```
core.js:6479 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[AngularFireAuthGuard -> AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]:
NullInjectorError: No provider for InjectionToken angularfire2.app.options!
NullInjectorError: R3InjectorError(AppModule)[AngularFireAuthGuard -> AngularFireAuth -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]:
NullInjectorError: No provider for InjectionToken angularfire2.app.options!
at NullInjector.get (core.js:11101)
at R3Injector.get (core.js:11268)
at R3Injector.get (core.js:11268)
at R3Injector.get (core.js:11268)
at injectInjectorOnly (core.js:4751)
at Module.ɵɵinject (core.js:4755)
at Object.AngularFireAuth_Factory [as factory] (angular-fire-compat-auth.js:125)
at R3Injector.hydrate (core.js:11438)
at R3Injector.get (core.js:11257)
at injectInjectorOnly (core.js:4751)
at resolvePromise (zone.js:1213)
at resolvePromise (zone.js:1167)
at zone.js:1279
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28659)
at ZoneDelegate.invokeTask (zone.js:405)
at Zone.runTask (zone.js:178)
at drainMicroTaskQueue (zone.js:582)
```

### Expected behavior

Mixing modular Auth with compat AuthGuards should not cause null injector error, or AngularFire should provide a modular AuthGuards too (along with a sample project).

### Actual behavior

Mixing modularAuth with compat AuthGuards throws the following error: R3InjectorError (NullInjectorError: No provider for InjectionToken angularfire2.app.options!). If I remove AuthGuards from my app, the error goes away (but I don't want to do that, obviously). Thank you for your answers in advance!

Inizia dalla configurazione dei provider in app.module.ts e dall'import dell'auth-guard compat in app-routing.module.ts, quindi riproduci l'errore dell'injector usando le versioni elencate di Angular, Firebase e AngularFire. Traccia le dipendenze di autenticazione del guard; il lavoro è completato quando modular Auth può essere usato con il guard senza l'errore relativo al provider mancante angularfire2.app.options, oppure quando viene documentato il percorso del guard modulare supportato.

Scritto dal modello di indicizzazione a partire dal testo della issue.