HttpClient 导入阻止我的组件工作

Question

我有一个角度服务 connexionService，其中我需要一些 csv 文件，我使用 HttpClient 和在另一个组件中工作的代码，但是当我将 HttpClient 添加到我的构造函数时，与我的组件关联的网页不会显示，它在没有 HttpClient 的情况下工作正常，如何做我以有效的方式获取 csv 文件的信息，抱歉造成混乱：这是 ConnexionService 的代码：

import { Injectable } from '@angular/core';
import { Auth, User, authState, signOut, signInWithPopup, GoogleAuthProvider } from '@angular/fire/auth';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ConnexionService {

    constructor(private fbAuth: Auth, private http : HttpClient) { } 
    readonly obsUser: Observable<User | null> = authState(this.fbAuth) 
    //readonly userSignal= Signal<boolean>();
    //readonly userSignal = this.obsUser.pipe(Map(this.user => !!user))
    async logout(): Promise<void> { 
     return signOut(this.fbAuth); 
      
        } 
    async loginGoogle(): Promise<void> { 
      
          return signInWithPopup(this.fbAuth, new GoogleAuthProvider()).then( 
            (result) => {
              const credential = GoogleAuthProvider.credentialFromResult(result);
             let token: string | undefined;
  
             if (credential) {
              token = credential.accessToken;
              } else { 
                 console.error("La credential est null.");
  }
              const user = result.user;
            }).catch((error) => {
              const errorCode = error.code;
              const errorMessage = error.message;
              const email = error.customData.email;
              const credential = GoogleAuthProvider.credentialFromError(error);
            }
      
        ) 
      
        } 
        lireLivreur(csvData:string){
          const lines=csvData.split('\n');
          const result:Livreur[]= [];
      
          const headers=lines[0].split(',');
          for(let i=1;i<lines.length;i++){
            const obj: ParsedData = {};
            const currentLine=lines[i].split(',');
            for(let j=0;j<headers.length;j++){
              obj[headers[j]]=currentLine[j];
            }
            const livreur:Livreur={
              trigramme:obj[headers[0]],
              prenom:obj[headers[1]],
              nom:obj[headers[2]],
              photo:obj[headers[3]],
              telephone:obj[headers[4]],
              emploi:obj[headers[5]],
              entrepot:obj[headers[6]],
              tournees:obj[headers[7]],
            }
            if(livreur.emploi=='livreur'){
              result.push(livreur);
            }     
          }
          return result;
        }
       
        
        lireInfos(){
          this.http.get('./assets/Export_Employés.csv',{responseType:'text'})
          .subscribe(data=>{
            this.livreurs=this.lireLivreur(data);
          },
        );
      }
      
        livreurs : Livreur[]=[];
         livreur: Livreur = {
          trigramme: '',
          prenom: '',
          nom: '',
          photo: '',
          telephone: '',
          emploi: '',
          entrepot: '',
          tournees: ''
        };   
     
    
      }


      interface Livreur {
        trigramme: string;
        prenom: string;
        nom: string;
        photo: string;
        telephone: string;
        emploi: string;
        entrepot: string;
        tournees: string;
      }    
      interface ParsedData {
        [key: string]: string;
      }
  
  

以及 ConnexionComponent 的代码：

  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConnexionComponent {
    constructor(private cox: ConnexionService){
    }

    
 
    async logGoogle():Promise<void>{
        this.cox.loginGoogle();
    }
    async logOut():Promise<void>{
        this.cox.logout();
    }
  }

我什至没有开始将我的 Connexion 服务注入到我的组件中，但它不起作用，所以问题一定出在 ConnexionService 上

Answer 1

您在应用程序中提供了 HttpClient 吗？

角度独立：

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient()
  ]
})