main.ts：5错误NullInjectorError：R3InjectorError

问题描述 投票：0回答：1

main.ts：5错误NullInjectorError：R3InjectorError（独立[_AppComponent]）[Firestore3 - > Firestore3 - > InjectionToken angularfire2.firestore-instances - > [对象对象] - > _NgZone - > _NgZone]： NullInjectorError：没有 _NgZone 的提供者！

尝试了数百种组合，但我仍然遇到此错误或类似错误。版本的角度为 19。

main.ts

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

<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

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

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

// 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 { }

环境.ts

export const environment = {
      "projectId":"",
      "appId":"",
      "storageBucket":"",
      "apiKey":"",
      "authDomain":"",
      "messagingSenderId":"",
      "measurementId":""
};
angular firebase google-cloud-firestore angular19
1个回答
0
投票

更新：

您根本没有安装 firebase，这也可能是问题所在。

npm i --save-dev @types/file-saver
npm i file-saver xlsx --legacy-peer-deps
npm i @angular/fire --legacy-peer-deps

确保您提供 

HttpClient
和 
provideAnimations
如下所示来解决：

错误 NullInjectorError：R3InjectorError（独立 [_AppComponent]）[_HttpClient -> _HttpClient -> _HttpClient]：NullInjectorError：没有 _HttpClient 的提供程序！

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';

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

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

确保仅初始化 Firebase 一次：

// initializeApp(environment); // <- remove this!


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

确保已将 

zone.js
添加到 
polyfills
文件的 
builder
对象中的 
angular.json
数组中：

    "build": {
      "builder": "@angular-devkit/build-angular:application",
      "options": {
        "outputPath": "dist/test",
        "index": "src/index.html",
        "browser": "src/main.ts",
        "polyfills": [
          "zone.js"
        ],

无需将

Firestore
添加到providers数组中，因为它已经是全局提供的。也不需要导入 
HttpClientModule
，因为我们已经全局添加了 
provideHttpClient
。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  providers: [], // <- notice!
  imports: [NgFor, FormsModule, MatFormFieldModule, MatSelectModule, MatAutocompleteModule,
    MatInputModule,  // <- notice!
  ] // Include required modules
})
export class AppComponent implements OnInit {
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.