title: Can't resolve all parameters for AngularFirestoreDocument: (?, ?)
body: <p>I am using angular 11 with firebase for authentication and firestore for collection of data and I am getting <code>Can't resolve all parameters for AngularFirestoreDocument: (?, ?)</code> error. How do I fix this null injector error? I tried to remove provider and it throws error <code>NullInjectorError: No provider for AngularFirestoreDocument!</code>
  Here is my code of app module.
  app.module.ts</p>
  <pre><code>import { NgModule } from '@angular/core';
  import {environment} from '../environments/environment';
  import {AuthService} from './shared/services/auth.service';
  
  import { BrowserModule } from '@angular/platform-browser';
  import { AppRoutingModule } from './app-routing.module';
  
  import { AngularFireModule } from '@angular/fire';
  import { AngularFireAuthModule } from '@angular/fire/auth';
  import { AngularFirestoreModule, AngularFirestoreDocument } from '@angular/fire/firestore';
  
  
  import { AppComponent } from './app.component';
  import { HeaderComponent } from './header/header.component';
  import { FooterComponent } from './footer/footer.component';
  import { HomeComponent } from './pages/home/home.component';
  import { ProfileComponent } from './pages/profile/profile.component';
  import { LoginComponent } from './login/login.component';
  import { SignupComponent } from './signup/signup.component';
  
  
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import {FormsModule, ReactiveFormsModule} from '@angular/forms';
      
  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      HomeComponent,
      ProfileComponent,
      LoginComponent,
      SignupComponent,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      AngularFireModule.initializeApp(environment.firebaseConfig),
      AngularFireAuthModule,
      AngularFirestoreModule,
      BrowserAnimationsModule,
      FormsModule,
      ReactiveFormsModule,
    ],
    providers: [AuthService, AngularFirestoreDocument],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>errror:
  <a href="https://i.stack.imgur.com/zvcQA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zvcQA.png" alt="error when AngularFirestoreDocument is added to provider " /></a></p>
  <p><a href="https://i.stack.imgur.com/8SfEr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8SfEr.png" alt="error when AngularFirestoreDocument is reomved from provider" /></a></p>