Error to inject servicio in home page

Ionic Framework Ionic Angular
1

Hi, I’m trying to test with ionic 7, but importing the service into a home page doesn’t work, it throws me an error that the module is not injected.

service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

    constructor(private http: HttpClient) { }

    getDatos() {
        return this.http.get('https://jsonplaceholder.typicode.com/users');
    }
}

home page

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { TmsService } from '../../services/tms.service';


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

    datos: any;

    constructor(private tms: TmsService) { }

    ngOnInit() {
        this.tms.getDatos().subscribe(data => {
            this.datos = data;
            console.log(this.datos);
        });
    }

}

error generated

image
image1154×504 35 KB

any suggestion? thanks

2

You need to import http client module in “aapcomponent.module.ts” file …
Like this …

Import: [HttpclientModule,…],
Provider: […],
It will work :hugs:

4

hi @vin001 thanks for the answer, i am using stand alone components, i have no modules, seems i solved it added provideHttpClient() in the main.ts

import { enableProdMode, importProvidersFrom } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
import { provideHttpClient } from '@angular/common/http';
import { IndexComponent } from './app/components/index/index.component';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(IndexComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    importProvidersFrom(IonicModule.forRoot({})),
    provideRouter(routes),
    provideHttpClient()
  ],
});
1 Like
5

Hi guys and good morning,

If you use HttpClient on the component itself, you can use @Component({..., import:[HttpclientModule,…]...});, but seeing your code, I believe you are using HttpClient on the injected service and not inside the component itself.

Editing main.ts is not a good idea since it is Ionic source, hence you will need to merge your changes the next time Ionic update it (or it may get over ridden and your changes will be gone).

We’re currently facing this issue as well, if you have other ideas or someone from Ionic can respond with the recommended solution to handle this I’d greatly appreciate it. In any case we’ll post here once we find an acceptable solution.

Take care,
Mic.

1 Like
6

hi @mic2 i tried to import the module directly into the component, but still had problems, I could only solve it by providing the httpClient from the main.js, it makes a bit of sense because it also provides the routes and some other modules can be provided from here, I don’t know if It is the best way and hopefully someone from the ionic team can answer how to correct this and have good practices. For now this works for me and I’ll leave it at that. thank you!

7

Found this migration guide by Ionic team from November 22. It seems they too update main.js to support providers on “global” level.

If someone from Ionic read this, please confirm this is still the recommended way. In general I would expect to have a location in which we can register providers which would be passed to bootstrapApplication.

Thanks,
Mic.

1 Like