NgxAuthFirebaseUIModule displaying ERROR NullInjectorError: R3InjectorError(AppModule)[ActivatedRoute -> ActivatedRoute -> ActivatedRoute]:

Question

Im new to angular and tried to integrate with firestore but getting NullInjectorError R3InjectorError(AppModule)[ActivatedRoute -> ActivatedRoute -> ActivatedRoute] when using firestore authentication. here is my code. thanks in advance.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms'

import { AppComponent } from './app.component';
import { TableComponent } from './table/table.component';
import { IonicModule } from '@ionic/angular';
import { NavbarComponent } from './navbar/navbar.component';
import{NgxAuthFirebaseUIModule }from 'ngx-auth-firebaseui'; 
import { AngularFireModule } from '@angular/fire';

import { environment } from '../environments/environment';
import { AngularFireStorageModule } from '@angular/fire/storage';

@NgModule({
  declarations: [
    AppComponent,
    TableComponent,
    NavbarComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    IonicModule, 
    AngularFireModule.initializeApp(environment.firebase),
    NgxAuthFirebaseUIModule.forRoot(environment.firebase),   
    AngularFireStorageModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<ngx-auth-firebaseui (onSuccess)="printUser($event)"
(onError)="printError($event)">    
</ngx-auth-firebaseui>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    
  }
  ngOnInit(): void {
    
  }
  printUser(event) {
    console.log(event);
  }

  printError(event) {
   console.error(event);
  }
}

Console error image

Answer 1

You're missing the import import { NgModule } from '@angular/core'; as shown in the Angular documentation and the AngularFire getting-started .