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!

Comienza con la configuración de providers en app.module.ts y la importación del auth-guard de compatibilidad en app-routing.module.ts; después, reproduce el error del inyector usando las versiones indicadas de Angular, Firebase y AngularFire. Rastrea las dependencias de autenticación del guard; se considera terminado cuando modular Auth se pueda usar con el guard sin el error del provider faltante angularfire2.app.options, o cuando se documente la ruta de guard modular compatible.

Escrito por el modelo de indexación a partir del texto del issue.