Angular导入HttpClient致组件无法加载的问题求助

我在Angular项目中有一个ConnexionService服务，需要读取CSV文件。使用HttpClient读取CSV的代码在其他组件中可正常运行，但当我将HttpClient注入该服务的构造函数后，关联组件对应的网页无法显示；移除HttpClient注入后则恢复正常。我尚未将该服务注入组件，因此问题应出在ConnexionService本身。请问如何实现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代码 #

@Component({
  selector: 'app-connexion',
  templateUrl: './connexion.component.html',
  styleUrls: ['./connexion.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConnexionComponent {
    constructor(private cox: ConnexionService){
    }

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

1. 确保已导入HttpClientModule #

Angular的HttpClient依赖HttpClientModule才能正常工作，即使服务是providedIn: 'root'，如果根模块（AppModule）没有导入该模块，注入HttpClient时会抛出错误，导致服务初始化失败，进而影响组件加载。

在AppModule的imports数组中添加HttpClientModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修复服务中的代码问题 #

（1）完善lireInfos方法的错误处理 #

原方法中的subscribe没有错误回调，读取CSV失败时会静默报错，导致问题难以排查。添加错误处理逻辑：

lireInfos() {
  this.http.get('./assets/Export_Employés.csv', { responseType: 'text' })
    .subscribe({
      next: (data) => {
        this.livreurs = this.lireLivreur(data);
      },
      error: (err) => {
        console.error('读取CSV文件出错:', err);
        // 可在此添加错误提示或默认数据逻辑
      }
    });
}

（2）优化CSV解析逻辑 #

原解析逻辑未处理空行或格式异常的情况，可能导致数组越界错误。在lireLivreur方法中添加空行判断与格式校验：

lireLivreur(csvData: string) {
  const lines = csvData.split('\n').filter(line => line.trim() !== '');
  const result: Livreur[] = [];

  if (lines.length === 0) return result;

  const headers = lines[0].split(',');
  for (let i = 1; i < lines.length; i++) {
    const currentLine = lines[i].split(',');
    if (currentLine.length !== headers.length) {
      console.warn(`第${i+1}行格式异常，跳过处理: ${lines[i]}`);
      continue;
    }
    const obj: ParsedData = {};
    for (let j = 0; j < headers.length; j++) {
      obj[headers[j]] = currentLine[j]?.trim() || '';
    }
    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;
}

（3）检查CSV文件路径与编码 #

• 确认Export_Employés.csv文件确实放在assets文件夹下，文件名的特殊字符（如é）可能导致路径识别问题，可尝试重命名为英文文件名（如employees.csv）测试。
• 确保CSV文件编码为UTF-8，避免读取时出现乱码。

3. 避免服务初始化时的异步操作 #

如果需要在服务启动时自动读取CSV，不要在构造函数中调用lireInfos()，因为构造函数是同步执行的，异步操作可能导致服务初始化异常。可使用APP_INITIALIZER提前初始化数据：

在AppModule的providers中添加：

import { APP_INITIALIZER } from '@angular/core';
import { ConnexionService } from './connexion.service';

export function initConnexionService(service: ConnexionService) {
  return () => service.lireInfos();
}

@NgModule({
  // ...其他配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initConnexionService,
      deps: [ConnexionService],
      multi: true
    }
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Mahrez Mus