Ionic Angular无app.module.ts时HttpClient依赖注入报错求助

针对独立组件的HttpClient配置方案 #

你的页面组件是独立组件（standalone: true），传统的模块导入方式不适用，可通过以下两种方式配置HttpClient：

方案1：在当前组件内局部提供HttpClient #

修改组件代码，导入provideHttpClient并添加到组件的providers数组中：

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { HttpClient, provideHttpClient } from '@angular/common/http'; // 新增provideHttpClient导入
import { map } from 'rxjs';

@Component({
  selector: 'app-ficha-evento',
  templateUrl: './ficha-evento.page.html',
  styleUrls: ['./ficha-evento.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule],
  providers: [provideHttpClient()] // 新增这一行
})
export class FichaEventoPage implements OnInit {

  event:any=[];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getEvnt().subscribe(res=>{
      this.event=res;
    });
  }
  
  getEvnt(){
    return this.http
    .get('assets/eventos.json')
    .pipe(
      map((res:any)=>{
        return res.data;
      })
    )
  }

}

方案2：全局提供HttpClient（推荐） #

如果多个组件都需要使用HttpClient，在main.ts中全局配置，避免每个组件重复设置：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http'; // 导入
import { provideIonicAngular } from '@ionic/angular/standalone';

bootstrapApplication(AppComponent, {
  providers: [
    provideIonicAngular(),
    provideHttpClient() // 添加这一行
  ]
});

读取JSON文件的替代方案（无需HttpClient） #

如果只是读取本地JSON文件，可直接用ES模块导入，步骤如下：

1. 在tsconfig.json中添加配置：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
  }
}

2. 修改组件代码直接导入JSON：

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

// 直接导入JSON文件，路径根据实际结构调整
import eventosData from '../../assets/eventos.json';

@Component({
  selector: 'app-ficha-evento',
  templateUrl: './ficha-evento.page.html',
  styleUrls: ['./ficha-evento.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule]
})
export class FichaEventoPage implements OnInit {

  event:any=[];

  constructor() { }

  ngOnInit() {
    this.event = eventosData.data;
  }

}

内容的提问来源于stack exchange，提问作者Violeta Quintanilla