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!

Start with the provider setup in app.module.ts and the compat auth-guard import in app-routing.module.ts, then reproduce the injector error using the listed Angular, Firebase, and AngularFire versions. Trace the guard's authentication dependencies; done means modular Auth can be used with the guard without the missing angularfire2.app.options provider error, or the supported modular guard path is documented.

Written by the indexing model from the issue text.