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!

Bắt đầu với cấu hình provider trong app.module.ts và import compat auth-guard trong app-routing.module.ts, sau đó tái hiện lỗi injector bằng các phiên bản Angular, Firebase và AngularFire được liệt kê. Truy vết các dependency xác thực của guard; được xem là hoàn tất khi modular Auth có thể được sử dụng với guard mà không gặp lỗi missing angularfire2.app.options provider, hoặc khi đường dẫn modular guard được hỗ trợ được ghi lại.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.