Angular 19: NullInjectorError 'No Provider for _NgZone' in main.ts

I'm encountering the following error during bootstrap in Angular 19:

main.ts:5 ERROR NullInjectorError: R3InjectorError(Standalone[_AppComponent])[Firestore3 -> Firestore3 -> InjectionToken angularfire2.firestore-instances -> [object Object] -> _NgZone -> _NgZone]:
NullInjectorError: No provider for _NgZone!

I have tried many configuration combinations with no success. Below are the relevant code files and settings for context:

main.ts

TYPESCRIPTCopied
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

app.component.html

HTMLCopied
<h1>Check-In App</h1>

<mat-form-field appearance="fill">
  <mat-label>Select a member</mat-label>
  <input type="text" matInput [(ngModel)]="selectedMember" [matAutocomplete]="autoMembers" (input)="filterMembers()">
  <mat-autocomplete #autoMembers="matAutocomplete" [autoActiveFirstOption]="false">
    <mat-option *ngFor="let member of filteredMembers" [value]="member">
      {{ member }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
<button (click)="addToParticipants()">Check In</button>

<div>
  <h2>Checked-In Participants</h2>
  <ul>
    <li *ngFor="let participant of participants">
      {{ participant }}
    </li>
  </ul>
</div>


<mat-form-field appearance="fill">
  <mat-label>Select a participant</mat-label>
  <input type="text" matInput [(ngModel)]="selectedParticipant" [matAutocomplete]="autoParticipants" (input)="filterParticipants()">
  <mat-autocomplete #autoParticipants="matAutocomplete" [autoActiveFirstOption]="false">
    <mat-option *ngFor="let participant of filteredParticipants" [value]="participant">
      {{ participant }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>
<button (click)="removeFromParticipants()">Check Out</button>

<div><button (click)="exportToExcel()">Export to Excel</button></div>

app.config.ts

TYPESCRIPTCopied
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideFirebaseApp(() => initializeApp({"projectId":"","appId":"","storageBucket":"","apiKey":"","authDomain":"","messagingSenderId":"","measurementId":""})),
    provideFirestore(() => getFirestore())]
};

app.component.ts

TYPESCRIPTCopied
import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgFor } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { MatFormFieldModule } from '@angular/material/form-field';  // Import MatFormFieldModule
import { MatSelectModule } from '@angular/material/select';
import { MatAutocompleteModule } from '@angular/material/autocomplete';  // Import MatAutocompleteModule
import { MatInputModule } from '@angular/material/input';  // Import MatInputModule
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import { Firestore, collection, collectionData, addDoc, getDocs } from '@angular/fire/firestore';
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';


interface Member {
  name: string;
}


initializeApp(environment);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  providers: [Firestore],
  imports: [NgFor, FormsModule, MatFormFieldModule, MatSelectModule, MatAutocompleteModule,
    MatInputModule, HttpClientModule
  ] // Include required modules
})
export class AppComponent implements OnInit {
  participants: string[] = [];
  members: string[] = [];
  filteredMembers: string[] = [];
  filteredParticipants: string[] = [];
  selectedMember: string = ''; // For check-in selection
  selectedParticipant: string = ''; // For check-out selection
  arr: Member[] = [];


  events$: Observable<any[]>;
  
  constructor(private http: HttpClient, private firestore: Firestore) {
    const aCollection = collection(this.firestore, 'items')
    this.events$ = collectionData(aCollection);
  }

  
  ngOnInit(): void {
    this.loadMembersFromCSV();
    //this.loadMembersFromFirestore(); // Load members from Firestore instead of CSV

  }
 
 
  exportToExcel(): void {
    const formattedData = this.filteredParticipants.map(participant => ({
      name: participant, // assuming 'name' is the field you want to show
      // You can include more fields if needed, e.g
      // Age: participant.age,
      // Email: participant.email,
    }));
    console.log(formattedData)
    console.log(this.filteredParticipants)
    const worksheet = XLSX.utils.json_to_sheet(formattedData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Members');

    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
    saveAs(blob, 'members.xlsx');
  }

  filterMembers(): void {
    const query = this.selectedMember.toLowerCase();
    this.filteredMembers = this.members.filter(member =>
      member.toLowerCase().includes(query)
    );
  }

  filterParticipants(): void {
    const query = this.selectedParticipant.toLowerCase();
    this.filteredParticipants = this.participants.filter(participant =>
      participant.toLowerCase().includes(query)
    );
  }

  // Load members from the CSV file
  loadMembersFromCSV(): void {
    this.http.get('assets/members.csv', { responseType: 'text' }).subscribe({
      next: (data) => {
        //console.log(data)
        this.filteredMembers = this.members = data.split('\n').map(line => line.trim()).filter(line => line !== '');
      },
      error: (err) => {
        console.error('Error loading members from CSV:', err);
      }
    });
  }


  // Add selected member to participants
  addToParticipants(): void {
    if (this.selectedMember && !this.participants.includes(this.selectedMember)) {
      this.participants.push(this.selectedMember);
    }
    this.filterParticipants()
    this.selectedMember = '';
  }

  // Remove selected participant from participants
  removeFromParticipants(): void {
    if (this.selectedParticipant) {
      this.filteredParticipants = this.participants = this.participants.filter(participant => participant !== this.selectedParticipant);
      this.selectedParticipant = '';
    }
  }
}

app.module.ts

TYPESCRIPTCopied
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common'; // Import CommonModule
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; // Import HttpClientModule
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule // Add CommonModule here
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }

environment.ts

TYPESCRIPTCopied
export const environment = {
      "projectId":"",
      "appId":"",
      "storageBucket":"",
      "apiKey":"",
      "authDomain":"",
      "messagingSenderId":"",
      "measurementId":""
};

Any insights on resolving this dependency injection issue would be appreciated. Note that some answers suggest removing duplicate provider declarations (for example, having Firestore in both app-level config and the component may cause this error) and ensuring that Firebase and HTTP dependencies are correctly provided.

Any guidance is welcome.