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!

Commencez par la configuration des providers dans app.module.ts et l’import de l’auth-guard de compatibilité dans app-routing.module.ts, puis reproduisez l’erreur de l’injecteur avec les versions indiquées d’Angular, Firebase et AngularFire. Suivez les dépendances d’authentification du guard ; le travail est terminé lorsque modular Auth peut être utilisé avec le guard sans l’erreur indiquant l’absence du provider angularfire2.app.options, ou lorsque le chemin de guard modulaire pris en charge est documenté.

Rédigé par le modèle d'indexation à partir du texte de l'issue.