Nullinjectorerror: no provider for httpclient! without app.module.ts

Question

I'm trying to read a JSON in Ionic Angular with HttpClient, but I get this error "nullinjectorerror: no provider for httpclient!".

The issue is that the lastest version of angular doesn't generate app.module.ts.

My code:

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

import { HttpClient } from '@angular/common/http';
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]
})
export class FichaEventoPage implements OnInit {

  event:any=[];

  constructor(private http: HttpClient) { }

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

}

Any idea? thanks!!

I'm trying to import HttpClientModule in the page.module.ts, but it doesn't work. I also tried to generate appModule manually... doesn't work either.

Now I'm looking for other ways to acces Json files...

Chellappan வ · Accepted Answer · 2023-04-20T14:02:22.290

2

To provide HttpClient in standalone app we could do

main.ts

import {provideHttpClient} from '@angular/common/http';

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

edited Apr 20 '23 at 14:02

answered Apr 20 '23 at 08:06

Chellappan வ

23,645
3
29
60

score 0 · Answer 2 · answered Apr 20 '23 at 08:10

You should only have the httpClientModule in the root of your project

Then you should use a service class to call the api that can be achieved like this

I wanna note this is if you use the classic module style applications

component.ts

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

@Component({
  selector: 'app-ficha-evento',
  templateUrl: './ficha-evento.page.html',
  styleUrls: ['./ficha-evento.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule]
})
export class FichaEventoPage {
  events$ = this.eventService.getEvents();

  constructor(private eventService: EventService) {}
}

component.html

<div>{{ events$ | async }}</div>

<!-- for seeing object content (For debugging) -->
<pre>{{ events$ | async | json }}</pre>

event.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, take } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EventService {
  constructor(private http: HttpClient) {}
  
  getEvents() {
    return this.http
    .get('/assets/eventos.json')
    .pipe(
      take(1),
      map((res:any)=>{
        return res.data;
      })
    )
  }
}

Thank you, but I keep getting the same exception. I also tried to add eventService in pageModule as a provider. Doesn't work neither. — Violeta Quintanilla, Apr 21 '23 at 07:41
Note i have seen projects where people have another httpModule which auto completes from the packages i cant remember the name of the project Any how to really help you i need more project wide info — Simon Dragsbæk, Apr 21 '23 at 08:57

Nullinjectorerror: no provider for httpclient! without app.module.ts

2 Answers2